javascript - 对于事先隐藏的元素设置 css3 动画疑问

Question

对于事先在css中设置了display: none的元素，为其用transition进行动画效果时，需要先将其显示，再改变 class 类名

<code>ele.style.display = 'block';
setTimeout(function() {
  ele.classList.add('in');
}, 0);
</code>

我的做法是这样的，不过感觉好麻烦，尤其每次都要写一个 setTimeout。
求赐教有什么更好的方法？

Answer 1

只能用visibility:hidden;来玩玩了，再配合opacity，创造fade-in fade-out的效果。
至于兼容性处理，详见本文：http://www.greywyvern.com/?post=337#

Answer 2

你可以写个函数封装它，或者不用diaplay: none，直接用opacity: 0来隐藏

Answer 3

也许采用 animation 是一个好办法

Answer 4

你可以封装一下，我现在用这个 https://gist.github.com/bammoo/33c5c797c76422a06cae：

<code>/**
 * Shortcut for adding animation class name to dom element
 * @param  {string}   cls        class name
 * @param  {Function} cb         callback
 * @param  {Function}   lastItemCb  callback execute at last elment animated
 * @return {object}              this
 */
$.fn.classAnimoEnd = function(cls, cb, lastItemCb) {
  var el = this;

  cb && (cb = $.proxy(cb, el));

  var count = $(el).length;

  $(el)
    .removeClass('animated ' + cls)
    .one($.support.animate.end, function () {
        cb && cb();
        $(el).removeClass('animated');

        if(count > 1) {
          count --;

          if(count === 0)
            lastItemCb && lastItemCb();
        }
      })
    .addClass('animated ' + cls);

  if(!$(el).css('display') !== 'none' )
    $(el).show();

  return this;
}
</code>

Answer 5

这个简单啊，你把display：block这个 放到一个类里，和动画的特效放在同一个类不久ok了

Answer 6

隐藏一个元素的方法有很多种

1. display: none
2. visibility: hidden
3. opacity: 0
4. max-height: 0, overflow: hidden
   等等，我就不罗列了。

这些方法中，有的是隐藏后不占据空间，有的要占据，有的是离散状态（没有transition）,有的可以有transition。你根据你的需求，然后选择一种方式就好了，实在不能解决你要的动画，用jquery的animate吧。