应用过渡以更改 div 内容

Question

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

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

编辑：jsfiddle链接

这是基本的Javascript：

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

任何建议将不胜感激！

谢谢！

Answer 1

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

这将在过渡中添加淡入淡出。

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;
    }

<div id="content">
            Stuff should be placed here.
        </div>
        <br/>
        <br/>
        <br/>
        <ul>
            <li onmouseover="hover('Apples are delicious')">Apple</li>
            <li onmouseover="hover('oranges are healthy')">Orange</li>
            <li onmouseover="hover('Candy is the best')">Candy</li>
        </ul>