我希望我的 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
如果您有任何想法,非常感谢!我现在感到绝望!祝你有美好的一天!
最佳答案
你可以这样做:
版本 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>
关于javascript - 使用 Javascript 隐藏然后显示文本 - 过渡不透明度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60582241/