javascript / css animations

Question

I have a div section that I want to when I clicked the button it comes down then rotates so it comes bottom but it doesnt rotate after transfering to bottom. It just comeback to first position in Y axis. how can i solve this issue

let slider = document.getElementsByClassName('slideshow')[0];

function movingfunc() {
  slider.classList.add('movement')
  setTimeout(nextFunc, 5000)
}

function nextFunc() {
  slider.removeAttribute('class', 'movement');
  slider.classList.add('movementAfter');
}

* {
  padding: 0;
  margin: 0;
}

body {
  background-image: url('346767.jpg');
  background-size: cover;
  z-index: 0;
}

#colorbody {
  background-color: rgba(235, 107, 107, 0.425);
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.slideshow {
  height: 100px;
  width: 200px;
  background-color: rgb(68, 0, 255);
  margin: 0 auto;
}

.movement {
  transform: translateY(500px);
  transition: 4s;
}

.movementAfter {
  transform: rotate(360deg);
  background-color: red;
  transition: 2s;
  margin: 0 auto;
  height: 100px;
  width: 200px;
}

<div class="slideshow" class="movement"></div>
<button id="chos" onclick="movingfunc()">click to move</button>

class="slideshow" class="movement" should be: class="slideshow movement". You shouldnt use multiple attributes of the same kind. — tacoshy
– tacoshy, Commented Sep 25, 2021 at 14:33
i changed it but not fixed yet ... can you send me the true edited code — IR Fifa
– IR Fifa, Commented Sep 25, 2021 at 19:56

Yupma · Accepted Answer · 2021-09-26 08:52:06Z

1

You can do like in below snippet and changes the animation at various percent it is complete .

If you want to trigger same anime than use setTimeout to remove the class and add on click of button .

With animation gives you extra functionality and more properties to work as expected

let slider = document.getElementsByClassName('slideshow')[0];
let btn = document.getElementById('chos');

btn.addEventListener('click', function() {
  slider.classList.add('animate')
  setTimeout(() => {
    slider.classList.remove('animate')
  }, 5000)
})

* {
  padding: 0;
  margin: 0;
}

body {
  background-image: url('346767.jpg');
  background-size: cover;
  z-index: 0;
}

#colorbody {
  background-color: rgba(235, 107, 107, 0.425);
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.slideshow {
  height: 100px;
  width: 200px;
  background-color: rgb(68, 0, 255);
  margin: 0 auto;
}

.slideshow.animate {
  animation: spinTrans 5s;
}

@keyframes spinTrans {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(500px) rotate(360deg)
  }
  100% {
    transform: rotate(0deg) translateY(0px);
    background-color: red;
  }
}

<div class="slideshow"></div>
<button id="chos">click to move</button>

================================================================

Update : As you need a change in same code :

You must remove the second function so that box stay at bottom . Now you can add any degree of rotation to it .

This was for previous edit : Your code is rotating the slideshow by 360deg but as it will be repositioned to same state so you are not seeing any changes .
If you change your angle to 90deg 180deg 270deg 450deg```` ..... you will see a rotation but you can't see rotation in 0deg 360deg 720deg``` .

Here is a working snippet with 180deg rotation you can apply any of the above mentioned and see changes

let slider = document.getElementsByClassName('slideshow')[0];

function movingfunc() {
  slider.classList.add('movement')
}

* {
  padding: 0;
  margin: 0;
}

body {
  background-image: url('346767.jpg');
  background-size: cover;
  z-index: 0;
}

#colorbody {
  background-color: rgba(235, 107, 107, 0.425);
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.slideshow {
  height: 100px;
  width: 200px;
  background-color: rgb(68, 0, 255);
  margin: 0 auto;
}

.movement {
  transform: translateY(500px) rotate(360deg);
  transition: 4s;
  background-color: red;
}

<div class="slideshow" class="movement"></div>
<button id="chos" onclick="movingfunc()">click to move</button>

edited Sep 26, 2021 at 8:52

answered Sep 25, 2021 at 15:32

Yupma

2,5322 gold badges13 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

IR Fifa Over a year ago

is there any other way to get my code issue and solve it ? i mean i want to use my code but i dont know it problem @Rana

Yupma Over a year ago

Updated the answer and solved your code also . But as mentioned in new answer animation will provide more functionality . So can be helpful in the future coding

IR Fifa Over a year ago

thanks it worked but there is another problem it goes to first position ... i don't like this i want that dive stay in second position ( where it comes down and wants to rotate )_ but in fact it goes down then it goes up while it is rotating

Yupma Over a year ago

I have changed the answer : You must remove the second function so that box stay at bottom . Now you can add any degree of rotation to it .

Collectives™ on Stack Overflow

javascript / css animations

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related