类切换时开始动画

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