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

Question

Welcome, well, I have 10 lottie animations, and I want to show them one by one in the same div. When a certain button is pressed, I do a function for each animation and at the beginning of the function I remove all the contents of the div to display the new content, but as is clear This causes flickering, I was wondering if there is a smarter method that does not cause flicker, please note that I am considered a beginner in website development

here is a link http://animationstest.atwebpages.com/ , use W,A,D,S to move, It is not responsive so use a pc

But notice that when you quickly press a and then d for example, Flickr does not happen

    <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

I was able to find another way to do what I was doing better, faster and more intelligent, for those who care, I'll explain what I did, simply what I was trying to do is to view a simple svg on the basis of the button that is pressed so I had to delete the old svg and view a new svg every time the user presses W, S, A, D on the keyboard But this Take it off and put it in causes Flickr and in people with slow internet speeds, switching to the new svg may be delayed more than a second,

What i did is that i used an js animation engine, which can animate your elements by using simple code, the best one I've found is: https://github.com/juliangarnier/anime