通过jQuery添加带有transform：scale（1）的类时，Transform不会动画

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

这是另一个想法，您不需要添加类，而只是依赖特定选择器无效的事实，因此元素的状态将发生变化：

$("button").click(event => {
    let div = $("<div class='item'></div>");
    div.insertAfter("button");
});

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

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

Answer 3

在我看来，最好使用@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>