javascript - 淡入/淡出时过渡文本的理想方式

Question

在我的整个代码中，我不断淡出文本，更新它，然后淡入以实现平滑过渡。我注意到很多时候文本会在完全淡出之前更新一瞬间。我不确定我是否使用了错误的方法。

这就是我现在的做法。有没有更好的办法？

function showInfo(text = '') {
    freeze_input = true
    fadeOut(question_text, '.125s')
    setTimeout(() => {
        question_text.style.display = ''
        if (text !== '') {
            question_text.innerText = text
        }
        fadeIn(question_text, '.125s')
        freeze_input = false
    }, 125)
}

function fadeIn(element, time = '.25s') {
    console.log('fading in ', element, ' for ', time)
    element.style.transition = time
    element.style.opacity = '1'
    element.style.visibility = 'visible'
}

function fadeOut(element, time = '.25s') {
    console.log('fading out ', element, ' for ', time)
    element.style.transition = time
    element.style.opacity = '0'
    element.style.visibility = 'hidden'
}

Answer 1

尝试删除这两行:

element.style.visibility = 'visible'
element.style.visibility = 'hidden'

可见性行为与 css 中的显示相同。为了顺利过渡，使用可见性不是个好主意。

如果您需要平滑过渡然后从 DOM 中移除元素，请使用 2 倍的 setTimeout。第一个用于隐藏元素的转换，第二个用于从 DOM 中删除元素。