text: Q:
  
  Не срабатывает transition:translateX через setInterval
  
  Есть слайдер с плавным пролистыванием слайдов. По клику листается правильно.  Добавил setInterval - пропала платная прокрутка, слайды меняются моментально игнорируя transition:translateX. 
  Подскажите, что может быть? Вопрос касается только последней функции chengerHandler().
  function slider(ul, slidenavblock) {
    var widthLi = ul.firstElementChild.clientWidth;
    for (var i = 0; i < ul.children.length; i++) {
      ul.children[i].firstElementChild.style.cssText = "width:" + widthLi + "px;"
    }
    var widthUl = ul.children.length * widthLi
    ul.style.cssText = "width:" + widthUl + "px;"
    var newBlock = document.createElement("div")
    newBlock.className = "slider-controls"
    var str = ""
    for (var i = 0; i < ul.children.length; i++) {
      ul.children[i].setAttribute("data-slide", (i + 1))
      str = "<span data-controls=" + (i + 1) + "></span>"
      newBlock.insertAdjacentHTML("beforeEnd", str)
    }
    slidenavblock.appendChild(newBlock)
    newBlock.firstElementChild.classList.add("active-slide")
  
    // Событие для переключения слайдера
    newBlock.addEventListener('click', clickHandler)
  
    function clickHandler(e) {
      var target = e && e.target
      var attr = target.getAttribute("data-controls")
      if (!attr) {
        return
      } else {
        for (var i = 0; i < ul.children.length; i++) {
          if (ul.children[i].getAttribute('data-slide') == attr) {
            var actSlide = document.querySelector('.active-slide').getAttribute('data-controls')
            if (attr - actSlide == 1 || attr - actSlide == -1) {
              ul.style.cssText = "width:" + widthUl + "px; transform: translateX(-" + widthLi * (attr - 1) + "px); transition: all .8s ease-in-out;"
            } else {
              ul.style.cssText = "width:" + widthUl + "px; transform: translateX(-" + widthLi * (attr - 1) + "px);transition: all .8s ease;"
            }
            cleanClasses();
            target.classList.add("active-slide")
          }
        }
      }
    }
  
    function cleanClasses() {
      for (var i = 0; i < newBlock.children.length; i++) {
        newBlock.children[i].classList.remove("active-slide")
      }
    }
  
    function chengerHandler() {
      setInterval(chenger, 5000);
  
      function chenger() {
        var cloning = ul.firstElementChild
        var cloned = cloning.cloneNode(true)
        var act = cloning.getAttribute("data-slide")
        for (var i = 0; i < newBlock.children.length; i++) {
          if (newBlock.children[i].getAttribute("data-controls") == act) {
            newBlock.children[i].classList.remove("active-slide")
            newBlock.children[i + 1].classList.add("active-slide")
          }
        }
        ul.style.cssText = "width:" + widthUl + "px; transform: translateX(-" + widthLi + "px); transition: all .8s ease-in-out;"
        ul.removeChild(cloning)
        ul.appendChild(cloned)
        ul.style.cssText = "width:" + widthUl + "px; left: 0;"
      }
    }
    window.addEventListener("DOMContentLoaded", chengerHandler)
  }
  
  A:
  
  Набросал пример, вроде все окей:
  
  var selectors = ['div#northSlogan', 'div#eastSlogan', 'div#southSlogan', 'div#westSlogan'];
  var words = ["list", "of", "random", "words"];
  
  function printWords() {
    var nums = [];
    for (var i = 0; i < words.length; i++) {
      nums[i] = i;
    }
  
    for (var i = 0; i < 4; i++) {
      $(selectors[i]).removeClass('opaque');
    }
  
    setTimeout(function() {
      for (var i = 0; i < 4; ++i) {
        var index = Math.floor(Math.random() * nums.length);
        document.querySelector(selectors[i]).innerHTML = words[nums[index]];
        nums.splice(index, 1);
      }
      for (var i = 0; i < 4; i++) {
        $(selectors[i]).addClass('opaque');
      }
    }, 600);
  
  
  }
  
  printWords();
  setInterval(printWords, 5000);
  div#northSlogan,
  div#eastSlogan,
  div#southSlogan,
  div#westSlogan {
    opacity: 0;
    transition: opacity 0.6s;
  }
  
  .opaque {
    opacity: 1 !important;
  }
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <div id="northSlogan" class="opaque">northslogan</div>
  <div id="eastSlogan" class="opaque">northslogan</div>
  <div id="southSlogan" class="opaque">northslogan</div>
  <div id="westSlogan" class="opaque">northslogan</div>
  
  