使用 Javascript 链接 Animista CSS 动画

Question

I searched for how to chain Animista CSS animations with JavaScript to slide out a tab and slide in a new one. I couldn't find anything but I did find this post on chaining animations using Promises.

Answer 1

I modified the code to slide in and out a container for use in tabs.

 // We can declare a generic helper method for one-time animationend listening let hideElement = (el, animation) => { return new Promise(resolve => { const onAnimationEndCb = () => { el.classList.remove('active', animation); el.removeEventListener('animationend', onAnimationEndCb); resolve(); } el.classList.add(animation); el.addEventListener('animationend', onAnimationEndCb) }); } let showElement = (el, animation) => { return new Promise(resolve => { const onAnimationEndCb = () => { el.classList.remove(animation); el.removeEventListener('animationend', onAnimationEndCb); resolve(); } el.classList.add('active', animation); el.addEventListener('animationend', onAnimationEndCb) }); } let hide_box_one = async () => { const el = document.getElementById('div_one'); await hideElement(el, 'slide-out-top'); } let show_box_two = async () => { const el = document.getElementById('div_two'); await showElement(el, 'slide-in-top'); } let hide_box_two = async () => { const el = document.getElementById('div_two'); await hideElement(el, 'slide-out-top'); } let show_box_one = async () => { const el = document.getElementById('div_one'); await showElement(el, 'slide-in-top'); } let change_tabs = async () => { await hide_box_one(); await show_box_two(); await hide_box_two(); await show_box_one(); await hide_box_one(); await show_box_two(); await hide_box_two(); await show_box_one(); await hide_box_one(); await show_box_two(); await hide_box_two(); await show_box_one(); } const btn = document.getElementById('btn'); btn.onclick = function() { change_tabs().then(() => console.log('tabs changed')); };

 #div_one { width: 50px; height: 50px; border: 10px solid red; display: none; } #div_one.active{ display:block; } #div_two { width: 50px; height: 50px; border: 10px solid blue; display: none; } #div_two.active{ display:block; } #btn{ margin-top:10px; border: 2px solid black; background: #fff; padding: 15px; } .slide-in-top { -webkit-animation: slide-in-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; animation: slide-in-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both; } .slide-out-top { -webkit-animation: slide-out-top 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; animation: slide-out-top 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both; } /* ---------------------------------------------- * Generated by Animista on 2020-8-22 19:10:58 * Licensed under FreeBSD License. * See http://animista.net/license for more info. * w: http://animista.net, t: @cssanimista * ---------------------------------------------- */ /** * ---------------------------------------- * animation slide-in-top * ---------------------------------------- */ @-webkit-keyframes slide-in-top { 0% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @keyframes slide-in-top { 0% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } 100% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } } @-webkit-keyframes slide-out-top { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } } @keyframes slide-out-top { 0% { -webkit-transform: translateY(0); transform: translateY(0); opacity: 1; } 100% { -webkit-transform: translateY(-1000px); transform: translateY(-1000px); opacity: 0; } }

 <div id="div_one" class="active"></div> <div id="div_two"></div> <button id="btn" type="button">Next Tab</button>

enter code here