javascript - 使用 Javascript 隐藏然后显示文本 - 过渡不透明度

Question

我希望我的 5 个文本使用过渡消失然后出现 - 再次使用过渡，就像一个小动画。

你可以在这里看到我的代码片段:https://codepen.io/makiwara/pen/abOVKBP

或在这里:

<h1>text1</h1>

h1{
  opacity: 1;
}

.hide {
  opacity: 0;
  transition: opacity 1000ms;
}

let i=0;
setInterval(function(){

var myArray = [
  "text1",
  "text2",
   "text3",
   "text4",
   "text5"
]

i=i+1;
if (i>4){
    i=0;
}

let name = myArray[i];
document.querySelector("h1").innerText=name;
document.querySelector("h1").classList.add="hide";
},3000);

这是我看到解决方案的片段，但是无论我多么努力，我就是无法实现它:https://codepen.io/zvona/pen/LVxxjM

如果您有任何想法，非常感谢!我现在感到绝望!祝你有美好的一天!

Answer 1

你可以这样做:

版本 1:使用 transitionend 事件

const myArray = [
        "text1",
        "text2",
        "text3",
        "text4",
        "text5"
      ],
     container = document.querySelector("h1"),
     transitionEndEvent = whichTransitionEvent();
let i = 0;

(function loop() {
  // Add the "hide" class
  setTimeout(()=> container.classList.add('hide'), 0);
  // Wait for the animation to end
  addEventListenerOnce(container, transitionEndEvent, () => {
    // Change the text
    container.innerHTML = myArray[i];
    // Remove the class
    container.classList.remove('hide');
    // Wait for the animation to end
    addEventListenerOnce(container, transitionEndEvent, () => {
      i = ++i % myArray.length;
      // Show the text for 1 second and continue
      setTimeout(loop, 1000);
    });
  });
})();

// Just a utility function to trigger an event handler once
function addEventListenerOnce(el, eventName, callback) {
  el.addEventListener(eventName, handler);
  function handler() {
    el.removeEventListener(eventName, handler);
    callback.call(el);
  }
}

// The name of the event depends on the browser
function whichTransitionEvent(){
  var t, el = document.createElement("fakeelement");

  var transitions = {
    "animation"      : "transitionend",
    "OAnimation"     : "oTransitionEnd",
    "MozAnimation"   : "transitionend",
    "WebkitAnimation": "webkitTransitionEnd"
  }

  for (t in transitions){
    if (el.style[t] !== undefined){
      return transitions[t];
    }
  }
}

h1{
  opacity: 1;
  transition: opacity 300ms;
}

.hide {
  opacity: 0;
}

<h1></h1>

关于whichTransitionEvent函数

浏览器对 transitionend event 有不同的名称.此实用程序函数将为当前浏览器选择正确的一个。我找到了它的灵感 here .

关于loop函数

如您所见，该函数包含在 (function loop() {...})(); 中。这叫做 IIFE (Immediately-Invoked Function Expression) .我们在声明它时调用该函数。在这种情况下，它也会递归地调用自己。

关于 i =++i % myArray.length; 行

在这里，我们使用 modulo operator使事情更短。但这等同于:

i++;
if (i >= myArray.length) { i = 0; }

版本 2:使用 setTimeout

与上面的版本不同，如果您在 CSS 中更改动画持续时间，则需要在 JS 中手动编辑动画持续时间。但是它删除了很多代码:

const myArray = [
        "text1",
        "text2",
        "text3",
        "text4",
        "text5"
      ],
     container = document.querySelector("h1"),
     animationDuration = 300; // in milliseconds
let i = 0;

(function loop() {
  // Add the "hide" class
  container.classList.add('hide');
  // Wait for the animation to end
  setTimeout(function() {
    // Change the text
    container.innerHTML = myArray[i];
    // Remove the class
    container.classList.remove('hide');
    // Wait for the animation to end
    setTimeout(function() {
      i = ++i % myArray.length;
      // Show the text for 1 second and continue
      setTimeout(loop, 1000);
    }, animationDuration);
  }, animationDuration);
})();

h1{
  opacity: 1;
  transition: opacity 300ms;
}

.hide {
  opacity: 0;
}

<h1></h1>