相关疑难解决方法(0)

我想用来.appendTo()修改元素的DOM位置.一旦完成,我需要使用CSS3为元素设置动画.

该元素不会动画,而是会捕捉到新的CSS样式.

JavaScript的:

$(".run").click(function() {
    $(".imageOriginal").appendTo(".insert").toggleClass("imageAnimated");   
});

HTML:

<div class="insert"> </div>
<img src="img/img1.png" class="imageOriginal"/>

CSS:

.imageOriginal {
    -webkit-transform: scale(0.1);
}
.imageAnimated {
    -webkit-transition: all 1s ease-in-out;    
    -webkit-transform: scale(1);
}

我分开了.appendTo()和.toggleClass()方法火在两个不同的点击事件.这种方法有效(但显然不是必需的).我也尝试.delay(1000)在追加后使用,但这也不起作用.

我正在通过 sololearn.com 学习 CSS3 中的过渡，其中给出的使用过渡的唯一示例与:hover选择器结合使用。

我能找到的所有其他东西都使用它，或者:active没有解释可以使用哪些其他选择器，或者为什么不显示这两个以外的选择器作为示例。

有没有办法在没有用户交互的情况下开始转换？或者这需要 JavaScript 吗？

我想将一个元素从一个父级移动到另一个父级。在这里我想应用 CSS 变换动画。

function abc() {
let child = document.querySelector("#child");
let parent = document.querySelector("#div_b");

parent.appendChild(child);
}

<div id="div_a" style="height:30px; width:30px; background-color:yellow;">
    <div id="child" class="new-box">
        <div style="width: 20px; height: 20px; background-color: green;"></div>
    </div>
  </div>

  <div id="div_b" style="height:30px; width:30px; background-color:red;">
  </div>
  
<button onclick="abc()">move</button>