通过Jquery添加带有transform:scale(1)的类时，Transform不会设置动画

问题描述

我正在尝试插入带有花式变换的新div:单击按钮时，scale()动画，但是它没有动画.我不知道为什么.有什么建议么?谢谢.

I am trying to insert a new div with fancy transform: scale() animation when button is clicked, however it doesn't animate. I am not sure why. Any suggestions? Thanks.

$("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>

推荐答案

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

You need to break up the adding the div and adding a class to it, e.g. using a setTimeout().

不需要上面的内容，动画将不会应用过渡，因为它一次完成了所有操作.

W/o the above, the animation won't apply the transition, as it does all in one go.

堆栈片段

$("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 ，它将起作用

If you use animation on the other hand, it will work

堆栈片段

$("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>

这篇关于通过Jquery添加带有transform:scale(1)的类时，Transform不会设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！