Question

我有一个块正在通过脚本动态更改内容，我希望该内容不会立即更改，但会淡出然后淡入新内容。我希望在没有jQuery的情况下完成 - 纯JS和CSS。我试图以这样的方式做到这一点：我已经在CSS中定义了透明和opacle类，并将转换设置为2s，并且当内容发生更改时，想要使用内容切换包含内容的类。正如我所料，它应该能够顺利淡出旧内容并淡出新内容。但实际上内容只会立即改变。 CSS：

.non-opacle {
    opacity:0;
    transition: opacity 2s linear;
}
.opacle {
    opacity:1;
    transition: opacity 2s linear;
}

HTML

       <div class="alert alert-info" id="wrapper">
            <p id="text-box">…</p>
        </div>

JS

var textBox = document.getElementById('text-box');
window.onload = function () {
    var failCounter = 0;
    var current = notes[Math.floor(Math.random() * 12)];
    textBox.className = 'opacle';
    textBox.innerHTML = '…';
    function keyClicked(event) {
        if (event.target.className.split(' ')[1] === current) {
            textBox.className = 'non-opacle';
            textBox.innerHTML = '*some altered content*';
            textBox.className = 'opacle';
    …

在JS中，我最初将内容包装器块设置为“opacle”＆＃39;具有初始内容的课程，然后在某些条件下，我将其设置为“非操作”，更改块的innerHTML以放置相关内容，并将课程设置回＆＃39; opacle＆＃ 39 ;. 但是没有动画发生（我做错了什么？

Answer 1

在将课程设置回opacle之前，浏览器不会等待转换完成。

这个简单的工作小提琴将转换移动到单独的选择器，并使用a transitionend event listener等待元素完全淡出，然后再更改内容并将其淡入。

http://jsfiddle.net/0m3Lpwxo/1/

CSS：

.opacle {
    opacity:1;
}

.non-opacle {
    opacity:0;
}

#test {
    transition: opacity 1s linear;
}

html：

<div id="test" class="non-opacle">this is content</div>
<button onclick="toggle()">toggle</button>

JS：

function transitionEnded() {
    var el = document.getElementById('test');
    el.innerHTML = "hello.";
    el.classList.remove('non-opacle');
}

function toggle() {
    var el = document.getElementById('test');
    el.addEventListener("transitionend", transitionEnded, true);
    el.classList.add('non-opacle');
}

Answer 2

您的问题是，您需要在初始转换完成之前同时添加和删除opacity。

您需要做的是延迟更改innerHTML并重置opacity，直到过渡完成。

这是一个非常简单的循环示例来说明原理，需要注意的重要部分是setTimeout。

var p=document.getElementById("change"),text=["One","Two","Three","Four","Five"],x=0,interval=setInterval(function(){
    x++;if(x===text.length)x=0;
    p.classList.add("hide");
    setTimeout(function(){
        p.innerHTML=text[x];
        p.classList.remove("hide");
    },500);
},2000);

#change{
    color:#000;
    font-family:arial;
    padding:5px;
    transition:opacity .5s linear;
}
.hide{
    opacity:0;
}

<p id="change">One</p>

Answer 3

您可能只需要在当前定义旁边定义浏览器特定样式（例如：-webkit-transition：opacity 2s linear;）

另外，我会说，不是将冗余过渡添加到两个类中，而是针对您的元素进行一些不会改变的内容，比如ID，并在那里定义过渡样式规则。这样你就可以让你的CSS更加干燥。

以下是处理CSS过渡的最佳参考资料：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Answer 4

试试这个：

<div id="myElement">Text</div>

function fadeOut(id,val){
  if(isNaN(val)){ val = 9;}
  document.getElementById(id).style.opacity='0.'+val;
  //For IE
  document.getElementById(id).style.filter='alpha(opacity='+val+'0)';
  if(val>0){
    val--;
    setTimeout('fadeOut("'+id+'",'+val+')',90);
  }else{return;}
}

function fadeIn(id,val){
  if(isNaN(val)){ val = 0;}
  document.getElementById(id).style.opacity='0.'+val;
  //For IE
  document.getElementById(id).style.filter='alpha(opacity='+val+'0)';

  if(val<9){
    val++;
    setTimeout('fadeIn("'+id+'",'+val+')',90);
   }else{return;}
}

摘自this。

Answer 5

我使用了以下JS：

function change(){
    var d = document.getElementById("div");
    d.className = d.className + " non-opacle";
    setTimeout(function(){
       d.className = "opacle";
        d.innerHTML = "TEST";
    },1000);
}

请参阅DEMO，CSS：

.opacle {
    opacity:1;
    transition: opacity 1s linear;
}
.non-opacle {
    opacity:0;/* No need to add transaction here */
}

块中淡入和淡出文本

5 个答案: