Javascript CSS转换不转换

因此，我有以下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按钮上的动画不执行转换，只是将不透明度设置为1.0。如果这有帮助的话，它是一个引导按钮元素，尽管我不认为它是元素，因为我已经切换了转鼓，然后“.metric number”和“.compareToTotal”元素不会产生动画。
设置
显示属性时不会运行转换。（见附件）

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

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

然后将高度设置为
auto
：

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


另一种方法是设置动画关键帧，并在希望显示和隐藏元素时切换类


相关的：



通过按钮时，是否尝试显示动画？如果您这样做，我认为您应该使用选择器作为
：hover
不抱歉，这发生在另一个按钮的onclick事件之后。您可以提供jsfiddle或codepen.io吗？@JamesG。是的，给我几分钟。@JamesG。詹姆斯：如果按钮有子项，你可能必须设置溢出：隐藏。嗯，这确实解决了我的问题。但是我的造型完全搞砸了。在我重新做造型之前，我会让它再打开一点，看看有没有人能拿到。哦，老兄，这看起来正是我想要的！隐藏元素甚至不占用空间。让我看看我是否能整合它：是的，那把小提琴正是我想要的。不得不做一些小的改动，但现在已经很完美了！