類切換時開始動畫

Question

我試圖創建一個蒙版，每次單擊切換CSS類的按鈕時，該蒙版都會從上到下滑動。 我嘗試使用CSS動畫，但是刪除類時蒙版不會滑動。 我也嘗試了CSS過渡，並且幾乎可以正常工作。 但是，刪除類別后，遮罩會從底部滑動到頂部，而不是從上到下滑動。

如何改善我的代碼片段，以使蒙版在每次單擊按鈕時從上到下滑動？

 var block = document.querySelectorAll('.block.first')[0], toggle = document.querySelectorAll('.toggle.anim')[0], blockSecond = document.querySelectorAll('.block.second')[0], toggleTrans = document.querySelectorAll('.toggle.trans')[0]; toggle.addEventListener('click', function(e) { e.preventDefault(); if (block.classList.contains('mask')) { block.classList.remove('mask'); console.log('remove class'); } else { block.classList.add('mask'); console.log('add class'); } }); toggleTrans.addEventListener('click', function(e) { e.preventDefault(); if (blockSecond.classList.contains('mask')) { blockSecond.classList.remove('mask'); console.log('remove class'); } else { blockSecond.classList.add('mask'); console.log('add class'); } }); 

 .block { position: relative; width: 200px; height: 200px; background: #ccc; overflow: hidden; } .block span { visibility: hidden; transition: visibility 0s linear .3s; } .block::before { content: ""; position: absolute; top: 0; left: 0; width: 200px; height: 200px; background: #999; transform: translate3d(0, -100%, 0); z-index: 5; } .block.mask span { visibility: visible; } /* USING ANIMATION */ .block.first.mask::before { animation: maskToggle 1s linear 0s forwards; } @keyframes maskToggle { 0% { transform: translate3d(0, -100%, 0); } 100% { transform: translate3d(0, 100%, 0); } } /* USING TRANSITION */ .block.second::before { transition: transform 1s; } .block.second.mask::before { transform: translate3d(0, 100%, 0); } 

 <div class="block first"> <span>HIDDEN CONTENT - - HIDDEN CONTENT - - HIDDEN CONTENT - - HIDDEN CONTENT</span> </div> <button class="toggle anim">Animation Toggle</button> <div class="block second"> <span>HIDDEN CONTENT - - HIDDEN CONTENT - - HIDDEN CONTENT - - HIDDEN CONTENT</span> </div> <button class="toggle trans">Transition Toggle</button> 

Answer 1

您可以使用jQuery做類似的事情：

 $('.toggle').click(function() { $('.block').removeClass('man1'); $('.block').addClass('man'); var clicks = $(this).data('clicks'); if (clicks) { $('.block').removeClass('man'); $('.block').addClass('man1'); } else { } $(this).data("clicks", !clicks); }); 

 .block { position: relative; width: 200px; height: 200px; background: #ccc; overflow: hidden; } .block span { visibility: hidden; transition: visibility 0s linear .3s; } .block::before { content: ""; position: absolute; top: -100%; left: 0; width: 200px; height: 200px; background: #999; z-index: 5; transition: all 0.5s ease; } .block::after { content: ""; position: absolute; top: -100%; left: 0; width: 200px; height: 200px; background: #999; z-index: 5; transition: all 0.5s ease; } .block.man::before { animation: maskToggle 1s linear 0s forwards; } .block.man1::after { animation: maskToggle 1s linear 0s forwards; } .block.man span { visibility: visible; } @keyframes maskToggle { 0% { top: -100%; } 100% { top: 100%; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="block second"> <span>HIDDEN CONTENT - - HIDDEN CONTENT - - HIDDEN CONTENT - - HIDDEN CONTENT</span> </div> <button class="toggle trans">Transition Toggle</button> 

的jsfiddle