首先，我知道如何使用 JQuery 执行此操作。既然那不碍事，让我解释一下。我所做的只是对CSS的简单知识练习。我想做的是用尽可能少的 javascript 使用 CSS 完成所有操作，即使这会使工作变得更难。我试图做到这一点，以便当您单击并按住首次出现的标题时，框中的幻灯片将滑入。我已确保动画在加载时正常工作。我确定这与我使用的选择器有关；
.fade-in:active ~ .side-box
包括整个自写(我猜是自己造成的)练习。不，这不是家庭作业。这是因为我工作很无聊，其实觉得这种事情很好玩!
body {
background-color: #000000;
color: #ccc;
font-family: verdana;
}
.fade-in {
position: relative;
animation: fadein 0.5s ease-out 0s 1 forwards;
}
.fade-in:active {
animation: slideTitleRight 0.5s ease-out 0s 1 forwards;
}
.fade-in::selection {
background: none;
}
.fade-in:active~.side-box {
animation: slideright 0.5s ease-out 0s 1 forwards;
}
.side-box {
background-color: #35587d;
width: 300px;
height: 100vh;
position: absolute;
left: -300px;
}
.side-box {
color: #fff;
}
@keyframes fadein {
0% {
position: absolute;
top: -10px;
opacity: 0;
}
100% {
position: absolute;
top: 0;
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideright {
0% {
position: absolute;
left: -300px;
}
100% {
position: absolute;
left: 0;
}
}
@keyframes slideTitleRight {
0% {
position: absolute;
left: 0;
}
100% {
position: absolute;
transform: translateX(300px);
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<body>
<div class="side-box">
<div class="container">
<h2>Welcome</h2>
</div>
</div>
<h1 class="fade-in">Hi there</h1>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>最佳答案
~ 选择在 dom 中跟随的一般 sibling 。
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
请参阅下面更新的代码段
body {
background-color: #000000;
color: #ccc;
font-family: verdana;
}
.fade-in {
position: relative;
animation: fadein 0.5s ease-out 0s 1 forwards;
}
.fade-in:active {
animation: slideTitleRight 0.5s ease-out 0s 1 forwards;
}
.fade-in::selection {
background: none;
}
.fade-in:active~.side-box {
animation: slideright 0.5s ease-out 0s 1 forwards;
}
.side-box {
background-color: #35587d;
width: 300px;
height: 100vh;
position: absolute;
left: -300px;
}
.side-box {
color: #fff;
}
@keyframes fadein {
0% {
position: absolute;
top: -10px;
opacity: 0;
}
100% {
position: absolute;
top: 0;
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideright {
0% {
position: absolute;
left: -300px;
}
100% {
position: absolute;
left: 0;
}
}
@keyframes slideTitleRight {
0% {
position: absolute;
left: 0;
}
100% {
position: absolute;
transform: translateX(300px);
}
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<body>
<h1 class="fade-in">Hi there</h1>
<div class="side-box">
<div class="container">
<h2>Welcome</h2>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>关于css - 使用 CSS 动画选择同级元素时的滑入框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48726687/