如何通過動畫CSS隱藏div點擊

我想顯示和隱藏基於CSS動畫的div，但我需要完全隱藏按鈕被點擊後，它應該與動畫一起發生。如何通過動畫CSS隱藏div點擊

目前它是動畫，但不隱藏。

這是我試過的。

document.getElementById('toggle').onclick = function(evt) { 
 
    var eSib = evt.target.previousElementSibling.className; 
 
    if(evt.target.previousElementSibling.className.indexOf('slideDown')>=0){ 
 
    \t evt.target.previousElementSibling.className = 'slideUp'; 
 
    } 
 
    else{ 
 
    \t evt.target.previousElementSibling.className = 'slideDown'; 
 
    } 
 
}

.slideDown{ 
 
    animation-name: pullDown; 
 
    -webkit-animation-name: pullDown; 
 

 
    animation-duration: 1.1s; 
 
    -webkit-animation-duration: 1.1s; 
 

 
    animation-timing-function: ease-out; 
 
    -webkit-animation-timing-function: ease-out; 
 

 
    transform-origin: 50% 0%; 
 
    -ms-transform-origin: 50% 0%; 
 
    -webkit-transform-origin: 50% 0%; 
 
} 
 

 
@keyframes pullDown { 
 
    0% { 
 
     transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
     transform: scaleY(1.02); 
 
    } 
 
    60% { 
 
     transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
     transform: scaleY(1.01); 
 
    } 
 
    100% { 
 
     transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
     transform: scaleY(1.01); 
 
    } 
 
    100% { 
 
     transform: scaleY(1); 
 
    } 
 
} 
 

 
@-webkit-keyframes pullDown { 
 
    0% { 
 
     -webkit-transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
     -webkit-transform: scaleY(1.02); 
 
    } 
 
    60% { 
 
     -webkit-transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
     -webkit-transform: scaleY(1.01); 
 
    } 
 
    100% { 
 
     -webkit-transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
     -webkit-transform: scaleY(1.01); 
 
    } 
 
    100% { 
 
     -webkit-transform: scaleY(1); 
 
    } 
 
} 
 

 
.slideUp{ 
 
    animation-name: pullUp; 
 
    -webkit-animation-name: pullUp; 
 

 
    animation-duration: 1.1s; 
 
    -webkit-animation-duration: 1.1s; 
 

 
    animation-timing-function: ease-out; 
 
    -webkit-animation-timing-function: ease-out; 
 

 
    transform-origin: 50% 0%; 
 
    -ms-transform-origin: 50% 0%; 
 
    -webkit-transform-origin: 50% 0%; 
 
} 
 

 
@keyframes pullUp { 
 
    0% { 
 
     transform: scaleY(0.98); 
 
    } 
 
    100% { 
 
     transform: scaleY(0); 
 
    } 
 
} 
 

 
@-webkit-keyframes pullUp { 
 
    0% { 
 
     -webkit-transform: scaleY(0.98); 
 
    } 
 
    100% { 
 
     -webkit-transform: scaleY(0); 
 
    } 
 
}

<div class="slideDown"> 
 
    <ul> 
 
    <li>Item1</li> 
 
    <li>Item2</li> 
 
    <li>Item3</li> 
 
    </ul> 
 
</div> 
 
<button id="toggle">Slide Up/Down</button>

來源

2016-09-23 M-S

出於純粹的好奇心和完全的方式......你爲什麼不做出了'evt.target.previousElementSibling'別名？這是很多不必要的代碼閱讀，只是說... – Azamantes

您可以使用animation-fill-mode: forwards;在.slideUp類堅持動畫的狀態，它已經完成了。

.slideUp{ 
animation-name: pullUp; 
-webkit-animation-name: pullUp; 

animation-duration: 1.1s; 
-webkit-animation-duration: 1.1s; 

animation-timing-function: ease-out; 
-webkit-animation-timing-function: ease-out; 

transform-origin: 50% 0%; 
-ms-transform-origin: 50% 0%; 
-webkit-transform-origin: 50% 0%; 

animation-fill-mode: forwards; 
}

這裏是它在行動小提琴：https://jsfiddle.net/3m353906/

的供應商前綴和詳細信息可以在這裏找到：https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

來源

2016-09-23 15:39:14

使用animation-fill-mode維持動畫的最終狀態。

-webkit-animation-fill-mode: forwards; 
animation-fill-mode: forwards;

工作版本：

document.getElementById('toggle').onclick = function(evt) { 
 
    var eSib = evt.target.previousElementSibling.className; 
 
    if (evt.target.previousElementSibling.className.indexOf('slideDown') >= 0) { 
 
    evt.target.previousElementSibling.className = 'slideUp'; 
 
    } else { 
 
    evt.target.previousElementSibling.className = 'slideDown'; 
 
    } 
 
}

.slideDown { 
 
    animation-name: pullDown; 
 
    -webkit-animation-name: pullDown; 
 
    animation-duration: 1.1s; 
 
    -webkit-animation-duration: 1.1s; 
 
    animation-timing-function: ease-out; 
 
    -webkit-animation-timing-function: ease-out; 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation-fill-mode: forwards; 
 
    transform-origin: 50% 0%; 
 
    -ms-transform-origin: 50% 0%; 
 
    -webkit-transform-origin: 50% 0%; 
 
} 
 
@keyframes pullDown { 
 
    0% { 
 
    transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    transform: scaleY(1.02); 
 
    } 
 
    60% { 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    transform: scaleY(1.01); 
 
    } 
 
    100% { 
 
    transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    transform: scaleY(1.01); 
 
    } 
 
    100% { 
 
    transform: scaleY(1); 
 
    } 
 
} 
 
@-webkit-keyframes pullDown { 
 
    0% { 
 
    -webkit-transform: scaleY(0.1); 
 
    } 
 
    40% { 
 
    -webkit-transform: scaleY(1.02); 
 
    } 
 
    60% { 
 
    -webkit-transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -webkit-transform: scaleY(1.01); 
 
    } 
 
    100% { 
 
    -webkit-transform: scaleY(0.98); 
 
    } 
 
    80% { 
 
    -webkit-transform: scaleY(1.01); 
 
    } 
 
    100% { 
 
    -webkit-transform: scaleY(1); 
 
    } 
 
} 
 
.slideUp { 
 
    animation-name: pullUp; 
 
    -webkit-animation-name: pullUp; 
 
    animation-duration: 1.1s; 
 
    -webkit-animation-duration: 1.1s; 
 
    animation-timing-function: ease-out; 
 
    -webkit-animation-timing-function: ease-out; 
 
    -webkit-animation-fill-mode: forwards; 
 
    animation-fill-mode: forwards; 
 
    transform-origin: 50% 0%; 
 
    -ms-transform-origin: 50% 0%; 
 
    -webkit-transform-origin: 50% 0%; 
 
} 
 
@keyframes pullUp { 
 
    0% { 
 
    transform: scaleY(0.98); 
 
    } 
 
    100% { 
 
    transform: scaleY(0); 
 
    } 
 
} 
 
@-webkit-keyframes pullUp { 
 
    0% { 
 
    -webkit-transform: scaleY(0.98); 
 
    } 
 
    100% { 
 
    -webkit-transform: scaleY(0); 
 
    } 
 
}

<div class="slideDown"> 
 
    <ul> 
 
    <li>Item1</li> 
 
    <li>Item2</li> 
 
    <li>Item3</li> 
 
    </ul> 
 
</div> 
 
<button id="toggle">Slide Up/Down</button>

來源

2016-09-23 15:39:40 DBS

如何通過動畫CSS隱藏div點擊

回答

相關問題