4s

4s

关注
发信
关注(28)粉丝(399)

css - 如何反转一系列包含span:nth-​​child的CSS过渡和转换

这种CSS“动画”本质上由span：nth-​​children上的多个转换和变换组成，它们使用转换延迟顺序地相互跟随。一种方法效果很好，但是反转动画的最佳方法是什么？由于这是一个序列，因此解决方案应逆转整个序列。例如参见小提琴：
http://jsfiddle.net/musicformellons/6nb0wy68/

#Pqb-icon {
  background: white;
  width: 170px;
  height: 100px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  border: 2px solid salmon;
  border-bottom: 20;
  -webkit-transition: .9s ease-in-out;
  -moz-transition: .9s ease-in-out;
  -o-transition: .9s ease-in-out;
  transition: .9s ease-in-out;
}

#Pqb-icon span {
  display: block;
  position: absolute;
  border: 5px solid black;
  width: 20px;
  height: 20px;
  bottom: 50px;
  left: 12%;
  background: rgba(255, 200, 220, 0.4);
  transition-timing-function: ease;
}

#Pqb-icon span:nth-child(1) {
  left: 12%;
  border-radius: 25px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#Pqb-icon.open span:nth-child(1) {
  left: 12%;
  border-radius: 25px;
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease-in-out;
}

#Pqb-icon.open span:nth-child(3) {
  left: 36%;
  bottom: 50px;
  border-radius: 25px;
  -webkit-transform: translate(-40px,0px);
  -moz-transform: translate(-40px,0px);
  -o-transform: translate(-40px,0px);
  transform: translate(-40px,0px);
  -webkit-transition: .25s ease .7s;
  -moz-transition: .25s ease .7s;
  -o-transition: .25s ease .7s;
  transition: .4s ease .9s;
  opacity: 0;
}

#Pqb-icon span:nth-child(2) {
  width: 5px;
  height: 38%;
  bottom: 27%;
  background: black;
  border: 0px solid black;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#Pqb-icon.open span:nth-child(2) {
  width: 5px;
  height: 38%;
  bottom: 27%;
  background: black;
  border: 0px solid black;
  -webkit-transition: .25s ease-in-out;
  -moz-transition: .25s ease-in-out;
  -o-transition: .25s ease-in-out;
  transition: .25s ease;
}

#Pqb-icon.open span:nth-child(4) {
  width: 5px;
  height: 38%;
  bottom: 27%;
  left: 15%;
  background: black;
  border: 0px solid black;
  -webkit-transform: rotateZ(-180deg);
  -moz-transform: rotateZ(-180deg);
  -o-transform: rotateZ(-180deg);
  transform: rotate(-180deg) ;
  -webkit-transition: .25s ease-in-out .7s;
  -moz-transition: .25s ease-in-out .7s;
  -o-transition: .25s ease-in-out .65s;
  transition: .4s ease .8s;
  opacity: 0;
}

#Pqb-icon span:nth-child(3) {
  bottom: 27%;
  left: 28.5%;
  border-radius: 25px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#Pqb-icon.open span:nth-child(5) {
  bottom: 27%;
  left: 46%;
  border-radius: 25px;
  -webkit-transform: rotateZ(-180deg);
  -moz-transform: rotateZ(-180deg);
  -o-transform: rotateZ(-180deg);
  transform: rotateZ(-180deg) ;
  -webkit-transition: .35s ease-in-out;
  -moz-transition: .35s ease-in-out;
  -o-transition: .35s ease-in-out;
  transition: .4s ease .4s;
  opacity: 0;
}

#Pqb-icon span:nth-child(4) {
  width: 5px;
  height: 32%;
  bottom: 10%;
  left: 43%;
  background: black;
  border: 0px solid black;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#Pqb-icon.open span:nth-child(6) {
  width: 5px;
  height: 32%;
  bottom: 10%;
  left: 46.5%;
  background: black;
  border: 0px solid black;
  -webkit-transform: rotateZ(-180deg);
  -moz-transform: rotateZ(-180dreg);
  -o-transform: rotateZ(-180deg);
  transform: rotateZ(-180deg) ;
  -webkit-transition: .35s ease-in-out .35s;
  -moz-transition: .35s ease-in-out .35s;
  -o-transition: .35s ease-in-out .35s;
  transition: .4s ease .4s;
  opacity: 0;
}

#Pqb-icon span:nth-child(5) {
  bottom: 27%;
  left: 51%;
  border-radius: 25px;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

#Pqb-icon span:nth-child(6) {
  width: 5px;
  height: 35%;
  bottom: 40%;
  left: 51%;
  background: black;
  border: 0px solid black;
  -webkit-transform-origin: left center;
  -moz-transform-origin: left center;
  -o-transform-origin: left center;
  transform-origin: left center;
}

最佳答案

由于您仅使用transition并且已经具有toggleClass方法，因此无需更改JS中的任何内容即可反转过渡效果。您需要做的就是将不同的过渡设置添加到默认状态（不适用于class='open'），如下面的代码片段所示。

本质上，我们正在做的是：


引起这种影响的元素是第三，第四，第五和第六跨度元素。
最初，为了产生移出效果，第五和第六跨度元素移出延迟为0.4s。
第三和第四跨度元素以0.8s（或0.9s）的延迟移出。这有一个额外的延迟，因为它必须在第五和第六个障碍物移出之后移出。第五和第六个跨度将花费0.4s（过渡持续时间）+ 0.4s（过渡延迟）= 0.8s完成。
在切换课程时，我们需要反向进行。也就是说，第三和第四跨度元素应以0.4s的延迟进入视图，而第五和第六跨度元素应在0.8s的延迟后进入视图。因此，将适当的transition设置添加到以下选择器就足够了：


#Pqb-icon span:nth-child(3) {transition: .4s ease .4s;}
#Pqb-icon span:nth-child(4) {transition: .4s ease .4s;}
#Pqb-icon span:nth-child(5) {transition: .4s ease .9s;}
#Pqb-icon span:nth-child(6) {transition: .4s ease .9s;}



注意：我已经删除了代码段中的供应商前缀，并添加了前缀库以使代码保持较小。



$('#Pqb-icon').on('click', function() {
    $(this).toggleClass('open');
  });

#Pqb-icon {
  background: white;
  width: 170px;
  height: 100px;
  border-radius: 5px;  /*dikte van rondjes*/
  position: relative;
  overflow: hidden;
  border: 2px solid salmon;
  border-bottom: 20;
  transition: .9s ease-in-out;
}
#Pqb-icon span {
  display: block;
  position: absolute;
  border: 5px solid black;
  width: 20px;
  height: 20px;
  bottom: 50px;
  left: 12%;
  background: rgba(255, 200, 220, 0.4);
  transition-timing-function: ease;
}

/* BEFORE collapsed: hamburger */

#Pqb-icon span:nth-child(1) {
  left: 12%;
  border-radius: 25px;
  transition: .25s ease-in-out;
  transform-origin: left center;
}
#Pqb-icon.open span:nth-child(1) {
  left: 12%;
  border-radius: 25px;
}
#Pqb-icon span:nth-child(2) {
  width: 5px;
  height: 38%;
  bottom: 27%;
  background: black;
  border: 0px solid black;
  transition: .25s ease;
  transform-origin: left center;
}
#Pqb-icon.open span:nth-child(2) {
  width: 5px;
  height: 38%;
  bottom: 27%;
  background: black;
  border: 0px solid black;
}
#Pqb-icon span:nth-child(3) {
  bottom: 27%;
  left: 28.5%;
  border-radius: 25px;
  transition: .4s ease .4s;
  transform-origin: left center;
}
#Pqb-icon.open span:nth-child(3) {
  left: 36%;
  bottom: 50px;
  border-radius: 25px;
  transition: .4s ease .9s;
  transform: translate(-40px, 0px);
  opacity: 0;
}
#Pqb-icon span:nth-child(4) {
  width: 5px;
  height: 32%;
  bottom: 10%;
  left: 43%;
  background: black;
  border: 0px solid black;
  transition: .4s ease .4s;
  transform-origin: left center;
}
#Pqb-icon.open span:nth-child(4) {
  width: 5px;
  height: 38%;
  bottom: 27%;
  left: 15%;
  background: black;
  border: 0px solid black;
  transition: .4s ease .9s;
  transform: rotate(-180deg);
  opacity: 0;
}
#Pqb-icon span:nth-child(5) {
  bottom: 27%;
  left: 51%;
  border-radius: 25px;
  transition: .4s ease .9s;
  transform-origin: left center;
}
#Pqb-icon.open span:nth-child(5) {
  bottom: 27%;
  left: 46%;
  border-radius: 25px;
  transition: .4s ease .4s;
  transform: rotateZ(-180deg);
  opacity: 0;
}
#Pqb-icon span:nth-child(6) {
  width: 5px;
  height: 35%;
  bottom: 40%;
  left: 51%;
  background: black;
  border: 0px solid black;
  transition: .4s ease .9s;
  transform-origin: left center;
}
#Pqb-icon.open span:nth-child(6) {
  width: 5px;
  height: 32%;
  bottom: 10%;
  left: 46.5%;
  background: black;
  border: 0px solid black;
  transition: .4s ease .4s;
  transform: rotateZ(-180deg);
  opacity: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button type="button">
  <span class="sr-only">Toggle navigation</span>
  <div id="Pqb-icon">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </div>
</button>

关于css - 如何反转一系列包含span:nth-​​child的CSS过渡和转换，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/33471110/

10-12 13:26
Powered by LMLPHP ©2024 4s 0.044259