title: jQuery - turn off transition for a while
body: <p>I have a task to slide images on button click. Images have transition. If I want to show next slide, current moves left and after next slide shows it hides to the right. When I want to show previous slide, it must quickly move to the left to appear on the left side. I need to turn off transition, move slide and then turn on transition.</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>let previous = $('#' + $(this).attr('data-slide')); // previous slide
  
  previous.addClass('removedTransition'); // trying to move image quickly without transition
  previous.addClass('movedLeft');
  previous.removeClass('removedTransition');
  // .visible is the current slide
  $('.visible').removeClass('visible'); // hide current slide
  previous.addClass('visible').removeClass('movedLeft'); // make previous one visible</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slide {
    width: 300px;
    position: absolute;
    transition: 0.5s;
    transform: translateX(100%);
  }
  
  .slide.movedLeft {
    transform: translateX(-20%);
  }
  
  .slide.removedTransition {
    transition: 0;
  }
  
  .slide.visible {
    transform: translateX(0);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="slider"&gt;
    &lt;div class="switch_buttons"&gt;
      &lt;div class="button" data-slide="1"&gt;&lt;/div&gt;
      &lt;div class="button" data-slide="2"&gt;&lt;/div&gt;
      &lt;div class="button" data-slide="3"&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="slides"&gt;
      &lt;img src="1.jpg" class="slide visible" id="1" /&gt;
      &lt;img src="2.jpg" class="slide" id="2" /&gt;
      &lt;img src="3.jpg" class="slide" id="3" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>jQuery seems to be ignoring 2-4 lines and shows previous slide from the right (where it was). How can I move slide to the left quickly without transition?</p>