CSS 以编程方式添加 class 时变换不动画（但如果我在 Chrome 中切换 class 则有效）

Question

我正在尝试为 div 的变换设置动画。

这是我的代码（现在，为了简单起见，只考虑最新的 Safari，它不需要供应商前缀）：

#mydiv{
    transition: all 2.3s cubic-bezier(1, 0, 0, 1);
    transform: scale(0.5);
    background:white;
    padding:30px;
}
.visible-popup{
    transform: scale(1)  !important;
}

我的div最初没有visible-popupclass，我正在使用jQuery的addClass方法添加它。但是，我的 div 跳转到 100% 比例而不设置动画。有趣的是，如果我在 Chrome 的开发者工具中手动切换 visible-popup class 的 transform 属性，或者如果我只是操纵 DOM在 inspector 和 add/remove 中手动 class，它确实完美地制作了动画。为什么当我以编程方式切换 class 时它没有动画？

Answer 1

看这里的例子，我不知道你到底在做什么，这应该足够了：

$("#mydiv").toggleClass("visible-popup");

https://jsfiddle.net/y36aer5m/

Answer 2

有意思。 #mydiv 的容器 div 有一个名为 fade 的 class，显然根本没有任何作用。当我删除那个什么都不做的 class 时（在样式检查器中检查），我的动画开始工作。

CSS 以编程方式添加 class 时变换不动画（但如果我在 Chrome 中切换 class 则有效）

CSS Transform not animating when class is added programatically (but works if I toggle the class in Chrome)

css

jquery

css-transitions

css-transforms