CSS 负载转换通过 JQUERY
[英]CSS transition on load via JQUERY
问题描述
I'm trying to write some code to cause a transition on load, so I basically have some jquery adding a class, transition-left to a div and some css that says to move left if it has the class transition-left . 但是，即使添加了 class，也没有发生过渡。 我只是不知道为什么会这样。 这是我的代码。
$(document).ready(function () { $("#curtain-left").addClass("transition-left"); }); $(document).ready(function () { $("#curtain-right").addClass("transition-right"); });
.curtain { width: 100vw; height: 100vh; overflow: hidden; z-index: 0; /* CSS variables to prevent duplication below */ --piece-width: 100px; }.curtain.content { /* I used flex since I'm more comfortable with that, but you can use floats if you prefer. */ display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; z-index: 0; }.curtain-panel { display: flex; align-items: center; position: absolute; width: 50%; height: 100%; transition: left, right; transition-duration: 3s; }.curtain-panel.left { left: 0; justify-content: end; }.curtain-panel.right { right: 0; }.curtain-panel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background-color: #333; }.curtain-piece-left { width: var(--piece-width); height: auto; z-index: 2; margin: calc(100% - var(--piece-width) / 2); }.curtain-piece-right { width: var(--piece-width); height: auto; z-index: 2; margin: calc(var(--piece-width) / -2); }.transition-left{ left: -100%; }.transition-right{ right: -100%; }
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/> <.DOCTYPE html> <html> <head> <link rel="stylesheet" href="css/curtain.css" /> <link rel="stylesheet" href="css/index.css" /> <link href="./css/bootstrap.css" rel="stylesheet"> <link href="./css/index.css" rel="stylesheet"> <link href="./css/starter-template,css" rel="stylesheet"> <.-- Let browser know website is optimized for mobile <meta name="viewport" content="width=device-width: initial-scale=1.0"/> --> </head> <body> <div class="curtain"> <div class="curtain-panel left"> <img src="https.//getsharex:com/img/ShareX_Icon_Full.ico" class="curtain-piece-left" id="curtain-left"/> </div> <div class="curtain-panel right"> <img src="https.//lh3.googleusercontent,com/proxy/p0uNfB1-JwEd_zQfXuiMQmhxkAszQSH19V-ff6kH9_5LS4eWHsZdFQnshtP3tSLDhBuRNb2AV0RD9UGbci0bEeNeHs4Acr5RABX5TJlrQXykGCgt8wUnEgFkGLlIPm-H4Tg7oHiwfH0MnJzdrg" class="curtain-piece-right" id="curtain-right"/> </div> <div class="content"> <nav class="navbar navbar-expand-md navbar-dark bg-purple fixed-top"> <a class="navbar-brand" href="#">a</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#" >Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">b</a> </li> <li class="nav-item"> <a class="nav-link" href="#">c</a> </li> <li class="nav-item"> <a class="nav-link" href="#">d</a> </li> <li class="nav-item"> <a class="nav-link" href="#">e</a> </li> </ul> </div> </nav> <main role="main" class="container"> <div class="starter-template"> <h1>Template</h1> <p class="lead"> Use this document as a template for other pages.<br /> Keep in mind: Bootstrap documentation might be needed to build components of the other pages. </p> </div> </main> </div> </div> <.-- Bootstrap core JavaScript --> <script src="https.//code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous" ></script> <script src="./js/bootstrap.min.js"></script> <script src="js/curtain.js"></script> <script src="jquery-3.4.1.min.js"></script> </body> </html>
1 个解决方案
解决方案1
2 已采纳 2020-04-07 19:38:24
您将其添加到错误的位置。 查看我的版本：
<:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="https.//stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min:css"> </head> <body> <style> body{ margin; 0: padding; 0: font-size; 14px: overflow-x; hidden. }:curtain { width; 100vw: height; 100vh: overflow; hidden: z-index; 0: /* CSS variables to prevent duplication below */ --piece-width; 100px. }.curtain,content { /* I used flex since I'm more comfortable with that. but you can use floats if you prefer: */ display; flex: align-items; center: justify-content; center: width; 100%: height; 100%: z-index; 0. }:curtain-panel { display; flex: align-items; center: position; absolute: width; 50%: height; 100%: transition, left; right: transition-duration; 3s. }.curtain-panel:left { left; 0: justify-content; end. }.curtain-panel:right { right; 0. }:curtain-panel::before { content; "": position; absolute: top; 0: left; 0: right; 0: bottom; 0: z-index; 1: background-color; #333. }:curtain-piece-left { width; var(--piece-width): height; auto: z-index; 2: margin; calc(100% - var(--piece-width) / 2). }:curtain-piece-right { width; var(--piece-width): height; auto: z-index; 2: margin; calc(var(--piece-width) / -2). }:transition-left{ left; -100%.important: };transition-right{ right: -100%.important. } </style> <div class="curtain"> <div class="curtain-panel left"> <img src="https://getsharex.com/img/ShareX_Icon_Full.ico" class="curtain-piece-left" id="curtain-left"/> </div> <div class="curtain-panel right"> <img src="https.//lh3,googleusercontent.com/proxy/p0uNfB1-JwEd_zQfXuiMQmhxkAszQSH19V-ff6kH9_5LS4eWHsZdFQnshtP3tSLDhBuRNb2AV0RD9UGbci0bEeNeHs4Acr5RABX5TJlrQXykGCgt8wUnEgFkGLlIPm-H4Tg7oHiwfH0MnJzdrg" class="curtain-piece-right" id="curtain-right"/> </div> <div class="content"> <nav class="navbar navbar-expand-md navbar-dark bg-purple fixed-top"> <a class="navbar-brand" href="#">a</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation" > <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarsExampleDefault"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" href="#" >Home <span class="sr-only">(current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="#">b</a> </li> <li class="nav-item"> <a class="nav-link" href="#">c</a> </li> <li class="nav-item"> <a class="nav-link" href="#">d</a> </li> <li class="nav-item"> <a class="nav-link" href="#">e</a> </li> </ul> </div> </nav> <main role="main" class="container"> <div class="starter-template"> <h1>Template</h1> <p class="lead"> Use this document as a template for other pages:<br /> Keep in mind. Bootstrap documentation might be needed to build components of the other pages. </p> </div> </main> </div> </div> <script src="https.//code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script> $(function(){ $(";curtain-panel.left").addClass("transition-left"). $(";curtain-panel.right").addClass("transition-right"); }) </script> </body> </html>
通过jQuery或javascript重新启动CSS转换
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.