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)

• 你肯定需要重构代码，隐藏东西绝对是一个单独的函数，你应该在某种循环中隐藏非活动页面，而不是在代码中重复它。