javascript - 在 css 动画完成后更改左值

Question

我正在尝试运行一个 div 滑入 veiw 和另一个 div 滑出 veiw 的动画，但我认为发生的事情是代码运行得太快并将显示设置为无所以你看不到动画发生无论如何我可以先运行动画然后设置显示和左值吗？

<script>
    var pagenumon = '1';
    function slide(pagenum){

        var whichpage = 'page' + pagenum;
        var waspage = 'page' + pagenumon;
        if(pagenum > pagenumon){
        document.getElementById(waspage).style.WebkitAnimation = "transition-left-out 0.5s";
        document.getElementById(waspage).style.animation = "transition-left-out 0.5s";
        document.getElementById(whichpage).style.WebkitAnimation = "transition-left-in 0.5s"; // Code for Chrome, Safari and Opera
        document.getElementById(whichpage).style.animation = "transition-left-in 0.5s";
        }else{
        document.getElementById(waspage).style.WebkitAnimation = "transition-right-out 0.5s";
        document.getElementById(waspage).style.animation = "transition-right-out 0.5s";
        document.getElementById(whichpage).style.WebkitAnimation = "transition-right-in 0.5s"; // Code for Chrome, Safari and Opera
        document.getElementById(whichpage).style.animation = "transition-right-in 0.5s";
        }
        if(pagenum == '1'){
            document.getElementById('page1').style.left = '0%';
            document.getElementById('page1').style.display = 'block';
            document.getElementById('page2').style.left = '100%';
            document.getElementById('page2').style.display = 'none';
            document.getElementById('page3').style.left = '100%';
            document.getElementById('page3').style.display = 'none';
            document.getElementById('page4').style.left = '100%';
            document.getElementById('page4').style.display = 'none';
            document.getElementById('page5').style.left = '100%';
            document.getElementById('page5').style.display = 'none';
            document.getElementById('page6').style.left = '100%';
            document.getElementById('page6').style.display = 'none';
        }else{
        if(pagenum == '2'){
            document.getElementById('page1').style.left = '-100%';
            document.getElementById('page1').style.display = 'none';
            document.getElementById('page2').style.left = '0%';
            document.getElementById('page2').style.display = 'block';
            document.getElementById('page3').style.left = '100%';
            document.getElementById('page3').style.display = 'none';
            document.getElementById('page4').style.left = '100%';
            document.getElementById('page4').style.display = 'none';
            document.getElementById('page5').style.left = '100%';
            document.getElementById('page5').style.display = 'none';
            document.getElementById('page6').style.left = '100%';
            document.getElementById('page6').style.display = 'none';
        }else{
        if(pagenum == '3'){
            document.getElementById('page1').style.left = '-100%';
            document.getElementById('page1').style.display = 'none';
            document.getElementById('page2').style.left = '-100%';
            document.getElementById('page2').style.display = 'none';
            document.getElementById('page3').style.left = '0%';
            document.getElementById('page3').style.display = 'block';
            document.getElementById('page4').style.left = '100%';
            document.getElementById('page4').style.display = 'none';
            document.getElementById('page5').style.left = '100%';
            document.getElementById('page5').style.display = 'none';
            document.getElementById('page6').style.left = '100%';
            document.getElementById('page6').style.display = 'none';
        }else{
            if(pagenum == '4'){
            document.getElementById('page1').style.left = '-100%';
            document.getElementById('page1').style.display = 'none';
            document.getElementById('page2').style.left = '-100%';
            document.getElementById('page2').style.display = 'none';
            document.getElementById('page3').style.left = '-100%';
            document.getElementById('page3').style.display = 'none';
            document.getElementById('page4').style.left = '0%';
            document.getElementById('page4').style.display = 'block';
            document.getElementById('page5').style.left = '100%';
            document.getElementById('page5').style.display = 'none';
            document.getElementById('page6').style.left = '100%';
            document.getElementById('page6').style.display = 'none';
        }else{
            if(pagenum == '5'){
            document.getElementById('page1').style.left = '-100%';
            document.getElementById('page1').style.display = 'none';
            document.getElementById('page2').style.left = '-100%';
            document.getElementById('page2').style.display = 'none';
            document.getElementById('page3').style.left = '-100%';
            document.getElementById('page3').style.display = 'none';
            document.getElementById('page4').style.left = '-100%';
            document.getElementById('page4').style.display = 'none';
            document.getElementById('page5').style.left = '0%';
            document.getElementById('page5').style.display = 'block';
            document.getElementById('page6').style.left = '100%';
            document.getElementById('page6').style.display = 'none';
        }else{
            if(pagenum == '6'){
            document.getElementById('page1').style.left = '-100%';
            document.getElementById('page1').style.display = 'none';
            document.getElementById('page2').style.left = '-100%';
            document.getElementById('page2').style.display = 'none';
            document.getElementById('page3').style.left = '-100%';
            document.getElementById('page3').style.display = 'none';
            document.getElementById('page4').style.left = '-100%';
            document.getElementById('page4').style.display = 'none';
            document.getElementById('page5').style.left = '-100%';
            document.getElementById('page5').style.display = 'none';
            document.getElementById('page6').style.left = '0%';
            document.getElementById('page6').style.display = 'block';

        }}}}}}
                window.pagenumon = pagenum;}

</script>

Answer 1

您看不到动画，因为无法为 display 设置动画。所以你应该做的是:

• 确保你有 overflow: hidden 这样就不会出现额外的滚动
• 通过将 left 设置为 100% 或其他值来执行动画
• 延迟 display:none 被应用

例如:

setTimeout(function(){
    document.getElementById('page6').style.display = 'none';
}, 500)

• 而且你肯定需要重构代码，隐藏东西绝对是一个单独的功能，你应该在某种循环中隐藏非事件页面，而不是在代码中重复。