僅在類別切換時順時針轉換

Question

我的toggled類在分配時將順時針旋轉180度。如何在toggled類刪除時如何修改我的CSS以將元素從180度旋轉到0度？

var el = document.getElementById("wrapper"); 
 
el.addEventListener("click", function(){ 
 
    this.classList.toggle("toggled"); 
 
});

#wrapper { 
 
    position: relative; 
 
    top: 20px; 
 
    left: 20px; 
 
    padding: 10px; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
} 
 

 
#wrapper.toggled { 
 
    transform: rotateZ(180deg); 
 
} 
 

 
#wrapper > div { 
 
    width: 35px; 
 
    height: 3px; 
 
    margin-bottom: 10px; 
 
    background-color: #3f51b5; 
 
} 
 

 
#wrapper > div:last-child { 
 
    margin-bottom: 0; 
 
} 
 

 
#wrapper, #wrapper > div { 
 
    transition-property: transform; 
 
    transition-duration: 0.5s; 
 
    transition-timing-function: cubic-bezier(0.35, 0, 0.25, 1); 
 
} 
 

 
#wrapper.toggled >div:first-child { 
 
    transform: rotateZ(45deg) rotateY(45deg) translateX(14px) translateY(-3px); 
 
} 
 

 
#wrapper.toggled >div:last-child { 
 
    transform: rotateZ(-45deg) rotateY(45deg) translateY(3px) translateX(14px); 
 
}

<div id="wrapper"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

Answer 1

我做你的腳本和樣式進行一些編輯，它很好地工作：https://jsfiddle.net/IA7medd/rkk0zc8k/

HTML：

<div id="wrapper"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

CSS：

#wrapper { 
    position: relative; 
    top: 20px; 
    left: 20px; 
    padding: 10px; 
    cursor: pointer; 
    display: inline-block; 
    transform: rotateZ(0deg); 
} 

#wrapper > div { 
    width: 35px; 
    height: 3px; 
    margin-bottom: 10px; 
    background-color: #3f51b5; 
} 

#wrapper > div:last-child { 
    margin-bottom: 0; 
} 

#wrapper, #wrapper > div { 
    transition-property: transform; 
    transition-duration: 0.5s; 
    transition-timing-function: cubic-bezier(0.35, 0, 0.25, 1); 
} 

#wrapper.toggled >div:first-child { 
    transform: rotateZ(45deg) rotateY(45deg) translateX(14px) translateY(-3px); 
} 

#wrapper.toggled >div:last-child { 
    transform: rotateZ(-45deg) rotateY(45deg) translateY(3px) translateX(14px); 
} 

.animated { 
    -webkit-animation-duration: 0.5s; 
     -moz-animation-duration: 0.5s; 
     -o-animation-duration: 0.5s; 
      animation-duration: 0.5s; 
    -webkit-animation-fill-mode: both; 
     -moz-animation-fill-mode: both; 
     -o-animation-fill-mode: both; 
      animation-fill-mode: both; 
} 

.animated.notAnimated { 
    -webkit-animation-duration: 0s; 
     -moz-animation-duration: 0s; 
     -o-animation-duration: 0s; 
      animation-duration: 0s; 
} 

@-webkit-keyframes rotate180 { 
    0%{transform: rotateZ(0deg);} 
    100% {transform: rotateZ(180deg);} 
} 

@-moz-keyframes rotate180 { 
    0%{transform: rotateZ(0deg);} 
    100% {transform: rotateZ(180deg);} 
} 

@-o-keyframes rotate180 { 
    0%{transform: rotateZ(0deg);} 
    100% {transform: rotateZ(180deg);} 
} 

@keyframes rotate180 { 
    0%{transform: rotateZ(0deg);} 
    100% {transform: rotateZ(180deg);} 
} 

.animated.rotate180 { 
    -webkit-animation-name: rotate180; 
    -moz-animation-name: rotate180; 
    -o-animation-name: rotate180; 
    animation-name: rotate180; 
} 

@-webkit-keyframes rotate360 { 
    0%{transform: rotateZ(180deg);} 
    100% {transform: rotateZ(360deg);} 
} 

@-moz-keyframes rotate360 { 
    0%{transform: rotateZ(180deg);} 
    100% {transform: rotateZ(360deg);} 
} 

@-o-keyframes rotate360 { 
    0%{transform: rotateZ(180deg);} 
    100% {transform: rotateZ(360deg);} 
} 

@keyframes rotate360 { 
    0%{transform: rotateZ(180deg);} 
    100% {transform: rotateZ(360deg);} 
} 

.animated.rotate360 { 
    -webkit-animation-name: rotate360; 
    -moz-animation-name: rotate360; 
    -o-animation-name: rotate360; 
    animation-name: rotate360; 
} 

@-webkit-keyframes rotate0 { 
    0%{transform: rotateZ(360deg);} 
    100% {transform: rotateZ(0deg);} 
} 

@-moz-keyframes rotate0 { 
    0%{transform: rotateZ(360deg);} 
    100% {transform: rotateZ(0deg);} 
} 

@-o-keyframes rotate0 { 
    0%{transform: rotateZ(360deg);} 
    100% {transform: rotateZ(0deg);} 
} 

@keyframes rotate0 { 
    0%{transform: rotateZ(360deg);} 
    100% {transform: rotateZ(0deg);} 
} 

.animated.rotate0 { 
    -webkit-animation-name: rotate0; 
    -moz-animation-name: rotate0; 
    -o-animation-name: rotate0; 
    animation-name: rotate0; 
} 

腳本：

var el = document.getElementById("wrapper"); 

var counter = 1; 
el.addEventListener("click", function(){ 

    this.classList.toggle("toggled"); 
    if(counter > 2){ 
    counter = 1; 
    this.classList.toggle("rotate360"); 
    } 
    if(counter == 1){ 
    this.classList.toggle("rotate180"); 
    } 
    else if(counter == 2){ 
    this.classList.toggle("rotate180"); 
    this.classList.toggle("rotate360"); 
    } 
    counter++; 

}); 

另一種解決方案：

這是另一種選擇，但使用jQuery：https://jsfiddle.net/IA7medd/pr9akayk/

的選項，你將只需要改變你的腳本是這樣的：

var currentRotate = 0; 
var $el = $("#wrapper"); 


$('#wrapper').click(function(){ 
    currentRotate+=180; 
    $(this).toggleClass('toggled'); 
    $el.css({ WebkitTransform: 'rotate(' + currentRotate + 'deg)'}); 
    $el.css({ '-moz-transform': 'rotate(' + currentRotate + 'deg)'}); 
})