css动画完成后更改左值

Question

我想运行一个div滑入veiw和另一个滑动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) 

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