CODEWITHSUNDEEP
javascriptcss
tempori
tempori

Reputation: 45

How to get animate between elements moving using javascript?

When click CLICK HERE div id photo will set css to top: 300px; left: -400px; transform: rotate(-60deg) how can i add animate into this process ?

<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>

Upvotes: 0

Views: 38

Answers (4)

LellisMoon
LellisMoon

Reputation: 5030

<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>

Upvotes: 0

Gerard
Gerard

Reputation: 15796

Easiest is to define a class with the elements that need to be animated. See below, hope this helps.

function swipeLike() {
  document.getElementById("photo").classList.add("anim");
}
#photo {
  transition: all 3s;
}

.anim {
  top: 300px;
  left: -400px;
  transform: rotate(-60deg);
}
<div onclick="swipeLike()">
  CLICK HERE
</div>
<div class="content">
  <div id="photo">
    MOVING
  </div>
</div>

Upvotes: 0

Luke Marks
Luke Marks

Reputation: 157

It depends on which type of animation you want. You can use css3 transition property to animate things.

W3Schools Transition property

Upvotes: 0

Kasabucki Alexandr
Kasabucki Alexandr

Reputation: 630

You can simply add transition:

    <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>

Upvotes: 1

Related Questions