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

CSS Transitions没有过渡

1 个答案: