javascript - CSS Transitions 不过渡

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

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

JSFiddle Demo

相关:

• > Transitions on the display: property