javascript - 对于事先隐藏的元素设置 css3 动画疑问-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

天蓬老师 2017-04-10 14:53:59

[JavaScript讨论组]

801

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

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

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

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(6)

PHP中文网2017-04-10 14:55:59 6楼

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

赞 +0

添加回复

PHPz2017-04-10 14:55:59 5楼

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

赞 +0

添加回复

PHPz2017-04-10 14:55:59 4楼

也许采用 animation 是一个好办法

赞 +0

添加回复

ringa_lee2017-04-10 14:55:59 3楼

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

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

赞 +0

添加回复