使用JS/CSS实现元素位置变换与文本切换时过渡效果失效问题

使用Bootstrap 5开发项目时，JavaScript修改标题文本、移动文本框均无过渡效果，需实现：

1. 标题文本切换时的淡入淡出过渡；
2. 文本框移动时的平滑过渡。

原代码 #

HTML #

<div class="container">
    <section>
        <div class="row justify-content-center text-center">
            <div class="col-sm-12 col-md-6 order-sm-1 p-5 fs-2" id="nayami-title">Title</div>
        </div>
    </section>
    <section class="row p-5 l-1">
        <div class="form-floating textBox" id="nayamiTextBox">
            <textarea class="form-control nayami-box" placeholder="aaa"
            id="floatingTextarea2" 
            style="height: 200px;width:70%;font-size: 60px;"
            maxlength="35"></textarea>
            <div class="formLabel">
                <label for="floatingTextarea">Write your worry here</label>
            </div>
        </div>
    </section>
        <div class="row position-absolute bottom-0 start-100 translate-middle-x b-1 r-1">
            <div class="col" id="nayami-button">
                <button type="button" class="btn btn-warning button-large" onclick="nayami()"><span class="fs-1">OK</span></button>
            </div>
        </div>
</div>

CSS #

.textBox{
    margin-left:10rem;
}
#nayamiTextBox{
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;   
}
#nayami-title{
    position: relative;
    opacity: 1;
    -webkit-transition: all 1.5s ease;
}

@keyframes FadeInAndOut {
    0%{ opacity: 0 }
    50%,100%  { opacity: 1 }
}

JavaScript #

function nayami(){

    var nayamiCount = 0;
    var nayamiText=document.getElementById("floatingTextarea2");
    var nayamiTextBox1 = document.getElementById("nayamiTextBox");
    var nayamiTitle = document.getElementById("nayami-title");
    var nayamiImg1 = document.getElementById("nayamiImage");
    var advisor1 = document.getElementById("speechBubble");
    var advisor2 = document.getElementById("speechBubble2");
    var nayamiButton = document.getElementById("nayami-button");
    var buttonAns = document.getElementById("buttonAnswer");
    var buttonAns2 = document.getElementById("buttonAnswer2");

    if(nayamiCount==0){
        if(nayamiText.value==""){
            alert("Warning");
        }else{
            nayamiImg1.style.opacity=1;
            nayamiText.style.color="red";
            nayamiText.readOnly=true;
            nayamiCount++;
        }
    }else if(nayamiCount==1){
        nayamiTitle.classList.add('FadeInAndOut');
        nayamiTitle.textContent="Open";
        nayamiCount++;
    }else if(nayamiCount==2){
        nayamiImg1.style.top = 15+"rem";
        nayamiImg1.style.right = 25+"rem";
        nayamiImg1.style.width =15+"%";
        nayamiTextBox1.style.right = 18+"rem";
        nayamiTextBox1.style.top = 18+"rem";
        nayamiCount++;
    }

}

修复方案 #

1. 标题文本过渡效果修复 #

原问题：直接修改textContent无法触发过渡（文本内容本身不支持过渡动画）；且nayamiCount为函数内局部变量，每次点击都会重置，逻辑无法递进。

修复步骤：

• 将nayamiCount改为全局变量，确保点击状态持续递进；
• 通过透明度切换实现文本替换的过渡：先让标题淡出，等待过渡完成后修改文本，再让标题淡入。

2. 文本框平滑移动修复 #

原问题：#nayamiTextBox未设置定位属性，top/right属性无法生效，自然触发不了过渡。

修复步骤：

• 给#nayamiTextBox添加position: relative，让定位属性生效；
• 确保过渡属性覆盖位置变化。

修改后的代码 #

CSS #

.textBox{
    margin-left:10rem;
}
#nayamiTextBox{
    position: relative; /* 新增定位属性，让top/right生效 */
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;   
}
#nayami-title{
    position: relative;
    opacity: 1;
    -webkit-transition: opacity 1.5s ease; /* 明确过渡opacity属性 */
    transition: opacity 1.5s ease;
}

JavaScript #

// 全局变量保存状态，避免每次点击重置
let nayamiCount = 0;

function nayami(){
    const nayamiText = document.getElementById("floatingTextarea2");
    const nayamiTextBox1 = document.getElementById("nayamiTextBox");
    const nayamiTitle = document.getElementById("nayami-title");
    const nayamiImg1 = document.getElementById("nayamiImage");
    const advisor1 = document.getElementById("speechBubble");
    const advisor2 = document.getElementById("speechBubble2");
    const nayamiButton = document.getElementById("nayami-button");
    const buttonAns = document.getElementById("buttonAnswer");
    const buttonAns2 = document.getElementById("buttonAnswer2");

    if(nayamiCount === 0){
        if(!nayamiText.value.trim()){
            alert("Warning");
            return;
        }
        nayamiImg1.style.opacity = 1;
        nayamiText.style.color = "red";
        nayamiText.readOnly = true;
        nayamiCount++;
    }else if(nayamiCount === 1){
        // 先淡出标题
        nayamiTitle.style.opacity = 0;
        // 等待过渡完成（1.5s）后修改文本并淡入
        setTimeout(() => {
            nayamiTitle.textContent = "Open";
            nayamiTitle.style.opacity = 1;
        }, 1500);
        nayamiCount++;
    }else if(nayamiCount === 2){
        nayamiImg1.style.top = "15rem";
        nayamiImg1.style.right = "25rem";
        nayamiImg1.style.width = "15%";
        // 现在定位属性已生效，修改位置会触发过渡
        nayamiTextBox1.style.right = "18rem";
        nayamiTextBox1.style.top = "18rem";
        nayamiCount++;
    }
}

关键说明 #

• 标题过渡：利用CSS的opacity过渡属性，配合setTimeout同步文本修改时机，实现平滑的文本切换效果；
• 文本框移动：通过添加position: relative，让top和right属性生效，从而触发已设置的transition过渡动画；
• 全局状态：将nayamiCount设为全局变量，保证多次点击按钮时状态能正确递进。

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