淡入和淡出块中的文本

Question

我有一个内容被脚本动态更改的块，我希望该内容不会立即更改，而是淡出然后淡入新内容。我希望在没有 jQuery 的情况下完成 — 纯 JS 和 CSS。我试图以这种方式做到这一点：我在 CSS 中定义了透明和不透明的 classes，过渡设置为 2s，并且想在内容更改时切换 classes 以用于包含内容的块。正如我所期望的那样，它应该会平滑地淡出旧内容并淡入新内容。但实际上内容只是瞬间改变。 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' class 和初始内容，然后在某些情况下，我将其设置为 'non-opacle'，更改块的内部 HTML放置相关内容，并将class设置回'opacle'。但是没有动画出现（我做错了什么？

Answer 1

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

此外，我想说的是，与其将过渡冗余地添加到两个类，不如针对您的元素的某些不会更改的内容（例如其 ID）并在此处定义过渡样式规则。这样你就可以让你的 CSS 更加干燥。

这是处理 CSS 转换的最佳参考 material：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Answer 2

试试这个：

<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 3

我使用了以下 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 */
}

Answer 4

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

这个简单的工作 fiddle 将过渡移出到一个单独的选择器，并使用 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 5

您的问题是您在初始转换有时间完成之前同时添加和删除 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>

淡入和淡出块中的文本

Fading in and out text in block

html

javascript

css

fade