Question

我正在利用关键帧将文本淡化为元素，但它只会在文本第一次加载到该元素时发生（当元素首次填充时）。我需要做出哪些更改才能在文本输入元素时重新触发关键帧？

<div id="foo"></div>

.test {  
  font-size: 12px;
  color: #a59eb5;  
  animation: fadein 5s;
}

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

/* the first time I populate text into this element, it fades in over 5 seconds.  
Changing the text does not re-trigger this fade. */

$('#foo').html('asdfasdfasdf');

有没有办法用CSS做到这一点？我意识到我可以通过j .addClass和.removeClass每次触发淡入/淡出来重新执行此操作，但我希望有一种更有效的方式通过CSS做到这一点。

codepen：http://codepen.io/lordterrin/pen/GmrPoQ

Answer 1

我不确定这个问题是否有意义。 CSS是关于样式与内容的分离，现在你要求它是内容意识到响应DOM变异事件的？只需设置/删除类。

（然后你会使用转换而不是动画，这也是有意义的，因为你只想让淡入淡出发生一次 - AIUI - 每次文字改变。）

Answer 2

有一个jQuery函数：fadeIn()。请记住，必须先隐藏它才能淡出它。

$('#foo').hide(); //Has to be hidden before it can bed faded in.

var visible = false;

$("button").click(function() {
  $("#foo").fadeToggle(5000);
  if ( visible === false) {
    $('button').text("Fade Out");
    visible = true;
  } else {
    $('button').text("Fade In");
    visible = false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Fade in</button>
<div id="foo">Hello</div>

在文本更改时重新初始化css @keyframes

2 个答案: