将转换应用于更改div内容

Question

我希望这个问题有道理！我正在使用此答案中的代码在网站上工作：https://stackoverflow.com/a/28097928

我想应用一个非常基本/短的淡入过渡，以便更改文本不会快速闪烁并且看起来不那么刺耳。我该怎么办？我如何知道将转换应用于哪个属性？

编辑：jsfiddle link

这是基本的Javascript：

<script>
function hover(description) {
console.log(description);
document.getElementById('content').innerHTML = description;
}
</script>

非常感谢任何建议！

谢谢！

Answer 1

我希望你不介意我添加一些CSS。

这将增加过渡时的淡出。

gTouches

function hover(description) {

            console.log(description);
            document.getElementById('content').className = null;
            setTimeout(function(){
                document.getElementById('content').className = 'transitionedText';
                document.getElementById('content').innerHTML = description;
            },100);
        }

@keyframes textTransition{
        0%{
            opacity: 0;
        }
        100%{
            opacity: 1;
        }
    }
    #content{
        color: #000;
        opacity: 0;
    }
    #content.transitionedText{
        animation-name: textTransition;
        animation-duration: 1000ms;
        animation-fill-mode: forwards;
        color: red;
    }