JS使用setTimeout实现文字滑动动画首次触发transition属性不生效问题

问题原因 #

首次触发动画时transition不生效是两个核心问题导致的：

• 你的.text元素没有设置初始的opacity和left属性值，浏览器默认的属性值不是可计算过渡的明确数值，第一次修改属性时无法计算过渡起始值，会直接跳变到目标状态，看不到动画效果。
• 首次触发时你才动态给元素添加transition属性，浏览器没有足够的时间将该属性应用到元素上就同时修改了过渡属性，也会导致过渡失效。后续触发时元素已经挂载了transition属性，就可以正常执行动画。

解决方案 #

第一步：修改CSS代码，补充初始属性和过渡规则 #

直接将过渡规则和初始状态写在CSS中，避免动态赋值的时序问题：

.story .box .right-part .text-container .text {
    line-height: 1.25;
    position: relative;
    /* 新增以下属性 */
    opacity: 1;
    left: 0;
    transition: all 0.5s;
}

第二步：优化JS代码，删除冗余逻辑 #

删掉JS中动态设置transition的那行代码，同时修正一处逻辑笔误：

function slide_animation(direction){
    // Init
    let text = document.querySelector(".story .box .right-part .text");
    let text_html = text.innerHTML;
    let text_slide = [
        "Text n°1",
        'Text n°2',
        'Text n°3'
    ];
    let current_slide = 0;

    // Looking for the current_slide
    for(let i=0;i<text_slide.length;i++){
        if (text_slide[i]==text_html){current_slide = i};
    }

    // Calculating the next slide position
    if (direction=='right'){
        if (current_slide >= text_slide.length-1){
            current_slide = 0;
        }
        else {current_slide+=1;}
    }
    else {
        if (current_slide <= 0){
            current_slide = text_slide.length-1;
        }
        else {
            // 修正原笔误：current_slide = current_slide-=1; 改为下方写法
            current_slide -=1;
        }
    }

    // Animation
    setTimeout(()=>{
        text.style.opacity = 0;
        text.style.left = '100px';  
    },250);


    setTimeout(()=>{
        text.innerHTML = text_slide[current_slide];
        text.style.opacity = 1;
        text.style.left = '0px';
    },750)
}

修改完成后首次触发动画即可正常生效。

内容的提问来源于stack exchange，提问作者Kilian Nagel