如何顛倒含有跨度的CSS轉換和變換序列：nth-​​child

Question

這個CSS「動畫」本質上包括跨度：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; 
} 

Answer 1

既然你只使用transition和已有的toggleClass方法，你不需要改變任何東西在JS扭轉過渡效果。您需要做的只是將不同的轉換設置添加到默認狀態（不適用於class='open'），如下面的代碼片段所示。

本質上講，我們正在做的是這樣的：

• 所造成的影響的元素是第三，第四，第五和第六span元素。
• 最初爲了移出效果，第五個和第六個跨度元素移出的延遲時間爲.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>