以编程方式添加类时，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的开发人员工具中transform类的visible-popup属性，或者我只是在检查器中操作DOM并手动添加/删除该类，那么 完美地制作动画。当我以编程方式切换类时，为什么不动画？

Answer 1

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

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

https://jsfiddle.net/y36aer5m/

Answer 2

有趣。 #mydiv的容器div有一个名为fade的类，它显然根本没有任何效果。当我删除那个什么也没做的课时（在风格检查员中检查过），我的动画开始起作用了。