在 CSS 动画完成后更改左值

change left value after css animation has finished

本文关键字：CSS 动画      更新时间：2023-09-26

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

<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>

您无法看到动画，因为无法对display进行动画处理。所以你应该做的是：

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

例如：

setTimeout(function(){
    document.getElementById('page6').style.display = 'none';
}, 500)
  • 而且你肯定需要重构代码，隐藏东西绝对是一个单独的功能，你应该在某种循环中隐藏非活动页面，而不是通过在代码中重复它。
相关文章：