Starting animation when class toggle

Question

I'm trying to create a mask that slides from top to bottom everytime I click the button that toggle a css class. I tried using css animation but mask doesn't slide when class is removed. I tried css transitions as well and it almost works. However when class is removed, mask slides from bottom to top, not from top to bottom as intended.

How can improve my code snippet to get mask sliding from top to bottom every button click ?

 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

You can do something like this with 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