javascript - 如何淡入淡出更改文本

Question

我正在通过 JAvascript 更改一些 html，我想在文本中淡入淡出。

这是javascript:

        var int = self.setInterval(function(){
            if(!isPaused){
                changeBG();
            }
        }, 3500);

        function changeBG(){
            //array of backgrounds
            now = (now+1) % array.length ;
            $('.documentary').css('background-image', 'url("' + array[now] + '")');
            document.getElementById('film-detail').innerHTML = array2[now];
            }

这是我认为应该使其淡入的 CSS:

.documentary-bg div.film-title {
    display: table-cell;
    vertical-align: bottom;
    bottom: 10px;
    -webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */
       -moz-animation: fadein 2s; /* Firefox < 16 */
        -ms-animation: fadein 2s; /* Internet Explorer */
         -o-animation: fadein 2s; /* Opera < 12.1 */
            animation: fadein 2s;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

和 HTML:

<div class='film-title' id="film-detail"></div>

我尝试了很多方法，它不会淡入!

Answer 1

为什么不直接使用 css 转换？

.text {
  opacity: 1;
  transition: opacity 2s;
}

.text.fadeOut {
  opacity:0;
}

https://jsfiddle.net/tvakyp2c/