当通过 Jquery 使用 transform: scale(1) 添加类时，变换不会动画化

Question

我正在尝试插入一个新的div，当单击按钮时，它会进行花哨的变换：scale((动画，但是它不会动画。我不知道为什么。有什么建议吗？谢谢。

$("button").click(event => {

let div = $("<div></div>");
div.insertAfter("button");
div.addClass("animate");
});

div{
height: 50px;
width: 50px;
background: #000;
transform: scale(0);
transition: transform 1s;
}
.animate{
transform: scale(1);
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<button>Button</button>

Answer 1

您需要分解添加div并向其添加类，例如使用setTimeout()。

如果没有上述内容，动画将不会应用过渡，因为它可以一次性完成所有操作。

堆栈代码段

$("button").click(event => {

let div = $("<div></div>");
div.insertAfter("button");
setTimeout(function() {
div.addClass("animate");
}, 10)
});

div{
height: 50px;
width: 50px;
background: #000;
transform: scale(0);
transition: transform 1s;
}
.animate{
transform: scale(1);
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<button>Button</button>

---

另一方面，如果您使用animation，它将起作用

堆栈代码段

$("button").click(event => {

let div = $("<div></div>");
div.insertAfter("button");
div.addClass("animate");
});

div{
height: 50px;
width: 50px;
background: #000;
transform: scale(0);
}
.animate{
animation: scale 1s forwards;
}
@keyframes scale {
from { transform: scale(0); }
to   { transform: scale(1); }
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<button>Button</button>

Answer 2

在我看来，最好使用@keyframes，而不需要使用addClass

$("button").click(event => {

let div = $("<div></div>");
div.insertAfter("button");
});

div{
height: 50px;
width: 50px;
background: #000;
animation: scale 1s forwards;
}
@keyframes scale {
from { transform: scale(0); }
to   { transform: scale(1); }
}

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<button>Button</button>