Question

假设您有一个按钮来替换同一区域内的段落，同一页面。

您是否可以通过设置innerText或textContent进行每次切换，每次都淡入？

我现在使用keyframes将其不透明度从0更改为1，但它仅适用于加载页面后的第一段。之后，每当我用innerText替换文字时，效果都不会显示。

排队等待的所有文本都是用JavaScript编写的，而不是用HTML编写的 - 如果它进行了更改。

Answer 1

您需要引入延迟或重新绘制。引入延迟可能是最简单的。

p.classList.add('hide');               // add the class
setTimeout(function() {                // delay and 
    p.textContent = txtList[idx];      // change text
    idx = (idx + 1) % txtList.length;
}, 500);
setTimeout(function() {                // delay and 
    p.classList.remove('hide')         // remove the class
}, 500);

小提琴：http://jsfiddle.net/abhitalks/rdnt9d5w/

<强>段：

var txtList = [
    'Lorem', 'ipsum', 'dolor', 'sit', 'amet', 
    'Lorem ipsum dolor sit amet'
], idx = 0, 
   p = document.getElementById('p1');

document.getElementById('btn1').addEventListener('click', fadein);

function fadein() {
    p.classList.add('hide');
    setTimeout(function() { 
        p.textContent = txtList[idx];
        idx = (idx + 1) % txtList.length;
    }, 500);
    setTimeout(function() { 
        p.classList.remove('hide')
    }, 500);
}

p { opacity: 1; transition: all 0.5s; }
p.hide { opacity: 0; }

<p id="p1">Lorem ipsum dolor sit amet</p>
<hr />
<button id="btn1">Change</button>

Answer 2

我会这样做：

＆＃13;

var i = 0;
var strings = ['first string........', 'second string.........', 'third string..........', 'fourth string...............'];
$('#add-text').click(function () {

    if (i > strings.length - 1) i = 0;

    var $result = $('#result');
    $result.fadeOut("fast", function () {
        $result.text(strings[i]).delay(300).fadeIn('slow');
        i++;
    });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="add-text">Add Text</button><br>
<p id="result">Here is some default text....</p>

＆＃13;

Answer 3

看这个Fiddle

您可以使用jQuery text()函数，后跟fadeIn()来实现此效果。不确定这是否适用于Javascript＆＃39; innerText

 $(this).text('Some other text!').fadeIn(500);

Answer 4

您是否尝试过添加css过渡？

例如，我用它来css来延迟背景颜色过渡：

.fader {
        color: #bbb;
        padding: 6px;
        -webkit-transition: all 0.5s;
        transition: all 0.5s; 
}

有关w3c学校页面转换的更多信息： http://www.w3schools.com/css/css3_transitions.asp

如何设置具有淡入效果的`innerText`？

4 个答案: