CSS 过渡不过渡

Question

所以我有以下 JS：

$('.metric-number, .compareToTotal').css({opacity : "0"}).on("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
    $(this).css('display', 'none');
    $('.forum-select-button').css({'display' : 'inline-block',
                                   'opacity' : '1'});
});

和CSS：

.metric-number, .compareToTotal, .forum-select-button{
    -webkit-transition: opacity 500ms ease-in-out;
    -moz-transition: opacity 500ms ease-in-out;
    -o-transition: opacity 500ms ease-in-out;
    transition: opacity 500ms ease-in-out;
}

所以初始动画有效，但是 .forum-select-button 上的动画不执行过渡，只是将不透明度设置为 1.0。如果有帮助，它是一个 Bootstrap 按钮元素，尽管我不认为它是元素，因为我已经切换了滚动，然后 '.metric-number' 和 '.compareToTotal' 元素没有动画.

Answer 1

设置 display 属性时，过渡不会运行。（参见 list of animatable properties）

解决方法是将高度设置为 0:

.forum-select-button {
  height: 0;
  opacity: 0;
}

然后设置高度为auto:

  $('.forum-select-button').css({
    'height': 'auto',
    'opacity': '1'
  });

JSFiddle Demo

另一种方法是设置动画关键帧并在您想要显示和隐藏元素时切换 class。

JSFiddle Demo

CSS 过渡不过渡

CSS Transitions not transitioning

javascript

css

jquery

animation

transition