Question

首先，我知道如何使用JQuery执行此操作。现在我已经解决了这个问题。我所做的只是一个简单的CSS知识实践。我想要做的是用尽可能少的javascript做所有CSS动作，即使它使工作更难。我试图让它成为当你点击并按住第一个出现的标题时，幻灯片框将滑入。我已确保动画正确加载。我确定它与我正在使用的选择器有关;

.fade-in:active ~ .side-box

包括完整的自我写作（我猜是自己造成的）练习。不，这不是功课。这是因为我在工作中感到无聊，实际上发现这种事情很有趣！

＆＃13;

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);
  }
}

＆＃13;

<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>

＆＃13;

Answer 1

〜选择在dom中跟随的一般兄弟姐妹。

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动画选择同级元素时

1 个答案: