CSS 过渡不过渡答案

【问题标题】：CSS Transitions not transitioningCSS 过渡不过渡
【发布时间】：2015-06-22 02:35:26
【问题描述】：

所以我有以下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' 元素没有动画。

【问题讨论】：

您是否尝试在通过按钮时显示动画？如果你这样做，我认为你应该使用选择器作为:hover
不抱歉，这发生在另一个按钮的 onclick 事件之后。
你能提供一个 jsfiddle 或 codepen.io 吗？
@JamesG。是的，给我几分钟。
@JamesG。给你詹姆斯：jsfiddle.net/27sqfc38

标签： javascript jquery css animation transition

【解决方案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