如何动态更改 div 的内容而不在 js 中闪烁

Question

欢迎，好吧，我有10个lottie动画，我想在同一个div中一一展示。当按下某个按钮时，我为每个动画执行一个函数，并在函数开始时删除 div 的所有内容以显示新内容，但很明显这会导致闪烁，我想知道如果有更聪明的方法，不会造成闪烁，请注意，我也算是网站开发的初学者

这是一个link http://animationstest.atwebpages.com/ ，使用 W,A,D,S 移动，没有响应所以使用 pc

但是请注意，例如，当您快速按 a 然后按 d 时，Flickr 不会出现

    <script>
    var animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),
      renderer: 'svg',
      loop: false,
      autoplay: true,
      path: 'idle.json',
  
  });


    var state = "idle";
    document.onkeydown = function(e){
    e = e || window.event;
    var key = e.which || e.keyCode;
    if(state === "idle"){
      if(key===65){
          leftmove();
     }
     if(key===68){
          rightmove();
     }
     if(key===87){
          upmove();
     }
     if(key===83){
          downmove();
     }
    }
    if(state === "leftmove"){
      if(key===68){
       leftback();
     }
    }
    if(state === "rightmove"){
      if(key===65){
          rightback();
     }
    }
    if(state === "upmove"){
      if(key===83){
          upback();
     }
    }
    if(state === "downmoved"){
      if(key===87){
          downback();
     }
    }

   }

    function leftmove(){
        document.getElementById('bm').innerHTML = "";
     animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),
      renderer: 'svg',
      loop: false,
      autoplay: true,
      path: 'leftmove.json',
  
    });
    state = "leftmove";
    }

    function leftback(){
        document.getElementById('bm').innerHTML = "";
       animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),
      renderer: 'svg',
      loop: false,
      autoplay: true,
      path: 'leftback.json',
  
    });
    state = "idle";
    }

    function rightmove(){
        document.getElementById('bm').innerHTML = "";
       animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),
      renderer: 'svg',
      loop: false,
      autoplay: true,
      path: 'rightmove.json',
  
    });
    state = "rightmove";
    }
    function rightback(){
        document.getElementById('bm').innerHTML = "";
      animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),
      renderer: 'svg',
      loop: false,
      autoplay: true,
      path: 'rightback.json',
  
    });
    state = "idle";
    }

    function upmove(){
        document.getElementById('bm').innerHTML = "";
       animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),
      renderer: 'svg',
      loop: false,
      autoplay: true,
      path: 'upmave.json',
  
    });
    state = "upmove";
    }
    function upback(){
        document.getElementById('bm').innerHTML = "";
       animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),
      renderer: 'svg',
      loop: false,
      autoplay: true,
      path: 'upback.json',
  
    });
    state = "idle";
    }

    function downmove(){
        document.getElementById('bm').innerHTML = "";
       animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),
      renderer: 'svg',
      loop: false,
      autoplay: true,
      path: 'downmove.json',
  
    });
    state = "downmoved";
    }
    function downback(){
      document.getElementById('bm').innerHTML = "";
      animation = bodymovin.loadAnimation({
      container: document.getElementById('bm'),
      renderer: 'svg',
      loop: false,
      autoplay: true,
      path: 'downback.json',
  
    });
    state = "idle";
    }
  </script>

Answer 1

我能够找到另一种方法来更好、更快、更聪明地做我正在做的事情，对于那些关心的人，我会解释我所做的，只是我想做的是查看一个简单的svg 基于按下的按钮，所以每次用户在键盘上按下 W、S、A、D 时，我都必须删除旧的 svg 并查看新的 svg 但是，将其取下并放入会导致 Flickr 和对于网速较慢的人，切换到新的 svg 可能会延迟一秒以上，

我所做的是我使用了一个 js 动画引擎，它可以使用简单的代码为您的元素制作动画，我发现的最好的是： https://github.com/juliangarnier/anime

如何动态更改 div 的内容而不在 js 中闪烁

how to Dynamically change the contents of the div without flickering in js

javascript

html

lottie