Javascript 在块中淡入淡出文本

我有一个块，它的内容是由脚本动态更改的，我希望该内容不会立即更改，而是淡出，然后随着新内容淡入。 我希望在没有jQuery的情况下完成这项工作-纯JS和CSS。 我正试图这样做： 我在CSS中定义了transition设置为2s的transparent和opacle类，并希望在内容更改时为block和content切换这些类。正如我所期望的，它应该能够顺利地淡出旧内容，淡入新内容。但事实上，内容只是瞬间改变。 CSS:

HTML

在JS中，我首先将内容包装块设置为带有初始内容的“opacle”类，然后在某些条件下，我将其设置为“non-opacle”，更改块的innerHTML以放置相关内容，然后将类设置回“opacle”。

---

但是没有动画出现（我做错了什么？

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

另外，我想说的是，不要将转换冗余地添加到这两个类中，而是针对元素的一些不会改变的内容，比如它的ID，并在那里定义转换样式规则。这样，您将使CSS更加干练

以下是处理CSS转换的最佳参考资料：

试试这个：

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

文本
功能衰减（id，val）{
如果（isNaN（val））{val=9；}
document.getElementById（id）.style.opacity='0'+val；
//对于IE
document.getElementById（id.style.filter='alpha（不透明度='+val+'0'）；
如果（val>0）{
瓦尔--；
setTimeout（'fadeOut（'id+'，'val+'），90）；
}else{return；}
}
功能fadeIn（id，val）{
如果（isNaN（val））{val=0；}
document.getElementById（id）.style.opacity='0'+val；
//对于IE
document.getElementById（id.style.filter='alpha（不透明度='+val+'0'）；
如果（val我使用了以下
JS
：

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

请参见以下带有
CSS
：

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

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

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


CSS:

html:

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

您的问题是，在初始转换完成之前，您正在同时添加和删除
不透明度

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

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


var p=document.getElementById（“更改”），text=[“一”、“二”、“三”、“四”、“五”]，x=0，interval=setInterval（函数（）{
x++；如果（x===text.length）x=0；
p、 添加（“隐藏”）；
setTimeout（函数（）{
p、 innerHTML=text[x]；
p、 类列表。删除（“隐藏”）；
},500);
}，2000）；
#更改{
颜色：#000；
字体系列：arial；
填充物：5px；
过渡：不透明度。5s线性；
}
.隐藏{
不透明度：0；
}
一个
请在你的问题中包含一个HTML和JS示例。你是否测试了你的建议，看看它是否解决了问题中出现的问题？在OP编辑他的问题以提供更多信息之前，我回答了这个问题，当时没有足够的上下文以有意义/相关的方式进行测试。是的，我回答了墨迹关于用函数淡出它，但我目前正试图用转换来实现这一点，在我发现它不起作用之前，我无法保持冷静。我一直在寻找一个解决方案，在点击一个按钮后转换其他元素。到目前为止，这是最简单、最直接的解决方案！
function change(){
    var d = document.getElementById("div");
    d.className = d.className + " non-opacle";
    setTimeout(function(){
       d.className = "opacle";
        d.innerHTML = "TEST";
    },1000);
}

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

.opacle {
    opacity:1;
}

.non-opacle {
    opacity:0;
}

#test {
    transition: opacity 1s linear;
}

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

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