如何使用javascript移动元素之间的动画？

Question

点击CLICK HERE div id photo会将css设置为top: 300px; left: -400px; transform: rotate(-60deg)如何在此流程中添加动画？

<script type="text/javascript">
function swipeLike() {
    document.getElementById("photo").style.top = "300px";
    document.getElementById("photo").style.left = "-400px";
    document.getElementById("photo").style.transform = "rotate(-60deg)";
}
</script>

<br><br><br><br><br><br>

<div onclick="swipeLike()">
CLICK HERE
</div>

<div class="content">
    <div id="photo">
        MOVING
    </div>
</div>

Answer 1

您只需添加transition：

即可

＆＃13;

＆＃13;

    <script type="text/javascript">
    	function swipeLike() {
        var photo = document.getElementById("photo");
        photo.style.top = "300px";
        photo.style.transition = "0.4s";
        photo.style.left = "-400px";
        photo.style.transform = "rotate(-60deg)";
    	}
    </script>

    <br><br><br><br><br><br>

    <div onclick="swipeLike()">
    CLICK HERE
    </div>


    <div class="content">
    <div id="photo">
    MOVING
    </div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这取决于您想要的动画类型。您可以使用css3 transition属性来制作动画。

W3Schools Transition property

Answer 3

最简单的方法是使用需要动画的元素定义class。见下文，希望这会有所帮助。

＆＃13;

＆＃13;

function swipeLike() {
  document.getElementById("photo").classList.add("anim");
}

＆＃13;

#photo {
  transition: all 3s;
}

.anim {
  top: 300px;
  left: -400px;
  transform: rotate(-60deg);
}

＆＃13;

<div onclick="swipeLike()">
  CLICK HERE
</div>
<div class="content">
  <div id="photo">
    MOVING
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

＆＃13;

＆＃13;

<script type="text/javascript">
	function swipeLike() {
  document.getElementById("photo").style.top = "300px";
  document.getElementById("photo").style.left = "-400px";
  document.getElementById("photo").style.transform = "rotate(-60deg)";
	}
</script>

<br><br><br><br><br><br>

<div onclick="swipeLike()">
CLICK HERE
</div>


<div class="content">
<div style="transition:all 1s linear;" id="photo">
MOVING
</div>
</div>

＆＃13;

＆＃13;

＆＃13;