title: Remove slide delay vanilla js
body: <p>I've got some section with infinite carousel using vanilla js.
  My logic is based on using justify-content:flex-end for previous slide and justify-content:flex-start for next one.
  My carousel has default justify-content:flex-start and it works fine when slides to next, but  there is some render delay if I'm using slide to prev.
  It's because of using justify-content:flex-end for prev, but how to get rid of delay?
  This is my code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const slider = document.querySelector('.slider')
  const carousel = document.querySelector('.carousel')
  const prev = document.querySelector('.prev')
  const next = document.querySelector('.next')
  
  let direction
  
  prev.addEventListener('click', () =&gt; {
      if (direction === -1) {
          slider.appendChild(slider.lastElementChild)
          direction = 1
      }
      direction = 1
      carousel.style.justifyContent = 'flex-end'
      slider.style.transform = 'translate(20%)'
  })
  
  next.addEventListener('click', () =&gt; {
      direction = -1
      carousel.style.justifyContent = 'flex-start'
      slider.style.transform = 'translate(-20%)'
  })
  
  slider.addEventListener('transitionend', () =&gt; {
      if (direction === -1) {
          slider.appendChild(slider.firstElementChild)
      } else if (direction === 1) {
          slider.prepend(slider.lastElementChild)
      }
  
      slider.style.transition = 'none'
      slider.style.transform = 'translate(0)'
      setTimeout(() =&gt; {
          slider.style.transition = 'transform 0.5s'
      })
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.section {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
    background-color: green;
    position: relative;
  }
  
  .carousel {
    display: flex;
    width: 70%;
    height: 100%;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
  }
  
  .slider {
    display: flex;
    width: 100%;
    height: 100%;
    transition: all 0.5s;
  }
  
  .item {
    display: flex;
    width: 20%;
    flex: 1;
    flex-shrink: 0;
    flex-basis: 20%;
    height: 70px;
  }
  
  .prev,
  .next {
    position: absolute;
    height: 70px;
    width: 70px;
    border-radius: 50%;
    border: 1px solid green;
    cursor: pointer;
    z-index: 3;
  }
  
  .prev {
    left: 20px;
  }
  
  .next {
    right: 20px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="section"&gt;
      &lt;div class="prev"&gt;Prev&lt;/div&gt;
      &lt;div class="next"&gt;Next&lt;/div&gt;
      &lt;div class="carousel"&gt;
          &lt;div class="slider"&gt;
              &lt;div class="item"&gt; Item 1&lt;/div&gt;
              &lt;div class="item"&gt; Item 2&lt;/div&gt;
              &lt;div class="item"&gt; Item 3&lt;/div&gt;
              &lt;div class="item"&gt; Item 4&lt;/div&gt;
              &lt;div class="item"&gt; Item 5&lt;/div&gt;
              &lt;div class="item"&gt; Item 1&lt;/div&gt;
              &lt;div class="item"&gt; Item 2&lt;/div&gt;
              &lt;div class="item"&gt; Item 3&lt;/div&gt;
              &lt;div class="item"&gt; Item 4&lt;/div&gt;
              &lt;div class="item"&gt; Item 5&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>