以编程方式添加类时，CSS 转换不会动画(但如果我在 Chrome 中切换类，则可以工作)

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-popup类，我正在使用 jQuery 的 addClass 方法来添加它。但是，我的div 在没有动画的情况下跳到 100% 的比例。有趣的是，如果我在 Chrome 的开发人员工具中手动切换visible-popup类的 transform 属性，或者如果我只是在检查器中操作 DOM 并手动添加/删除类，它确实可以完美地制作动画。为什么当我以编程方式切换类时它没有动画？

Answer 1

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

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

https://jsfiddle.net/y36aer5m/

Answer 2

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