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

Question

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

你可以在这里看到我的 sn-p：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);

这是我看到解决方案的 sn-p，但是无论我多么努力，我都无法实现：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>

Answer 2

您将课程添加到班级列表的方式不正确。

用这行代码替换它：

document.querySelector("h1").classList.add("hide");

虽然这不是您想要的工作方式，但过渡效果正在应用中。