如何在替换文本时添加幻灯片效果？

Question

我有一个不错的脚本，该脚本用一个按钮替换了我的文字。现在，我想为<button>下的元素（在本例中为text-target-div）上添加一个幻灯片效果。当您单击'Replace'按钮时，该按钮会在没有动画的情况下跳转到特定位置。我很乐意为此元素在此位置添加一张幻灯片。我不知道该怎么做。

var target = document.getElementById('target');
var titles = [
  'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.',
  'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.',
  'Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.'];

function newTitle () {
    var i = (Math.random() * titles.length) | 0;
    target.style.opacity = "0";
    setTimeout(function(){
      target.innerText = titles[i];
      target.style.opacity = "1";
    }, 600);
}


newTitle();

#target{
  transition: all .6s ease;
}

<p id="target"></p>
<button id="trigger" onclick="newTitle()">Replace</div>