Animating with CSS3 triggered by JavaScript

Question

Animating with CSS3 triggered by JavaScript

Can you help me with an issue I'm having? When attempting to rotate the blue square using a function, it only works once. After that, the page needs to be reloaded in order for the rotation function to work again. Additionally, after rotating 120 degrees with one click, the square resets itself back to its starting position.

I need assistance with two things:

Fix the rotation function so it can be clicked multiple times without resetting.
Prevent the square from automatically resetting its position.

I have created a fiddle with the code: https://jsfiddle.net/kv7may8t/2/

document.getElementById('button1').addEventListener('click', function() {
    document.getElementById('blue').classList.add('rotateright');
});

Summary of the function: Click on button1 to activate the function that adds the "rotateright" class to the blue square, causing it to rotate by 120 degrees.

javascript html css

Answer 1

Answer №1

Solution for the initial problem is to remove a specific class:

var bluediv = document.getElementById('blue')

bluediv.addEventListener("animationend", function() {
bluediv.classList.remove('rotateright');
      bluediv.classList.remove('rotateleft');
});

View the updated Fiddle. (Clicking the rotation function multiple times no longer causes issues)

Additionally, for the second issue (apply in right only):

Implement:

animation-iteration-count: forwards;

Check the modified version in the updated Fiddle here. (Prevents the square from resetting its position)

Answer 2

Solution for the initial problem is to remove a specific class:

var bluediv = document.getElementById('blue')

bluediv.addEventListener("animationend", function() {
bluediv.classList.remove('rotateright');
      bluediv.classList.remove('rotateleft');
});

View the updated Fiddle. (Clicking the rotation function multiple times no longer causes issues)

Additionally, for the second issue (apply in right only):

Implement:

animation-iteration-count: forwards;

Check the modified version in the updated Fiddle here. (Prevents the square from resetting its position)

Answer 3

Answer №2

Your solution is almost there, just a small tweak needed! The issue lies in the implementation of the transform classes. To solve this problem, simply remove the class before adding it again. You can check out an example on this fiddle.

document.getElementById('button1').addEventListener('click', function() {
    document.getElementById('blue').classList.remove('rotateright');
    setTimeout(function(){
        document.getElementById('blue').classList.add('rotateright');    
    },100)
});

document.getElementById('button2').addEventListener('click', function() {
    document.getElementById('blue').classList.remove('rotateleft');
    setTimeout(function(){
        document.getElementById('blue').classList.add('rotateleft');        
    },100)
});

document.getElementById('button3').addEventListener('click', function() {
    document.getElementById('red').classList.add('animate');
});

document.getElementById('button4').addEventListener('click', function() {
    document.getElementById('red').classList.remove('animate');
});

Remember to use setTimeout after removing the class to allow time for the transition to take effect.

Answer 4

Your solution is almost there, just a small tweak needed! The issue lies in the implementation of the transform classes. To solve this problem, simply remove the class before adding it again. You can check out an example on this fiddle.

document.getElementById('button1').addEventListener('click', function() {
    document.getElementById('blue').classList.remove('rotateright');
    setTimeout(function(){
        document.getElementById('blue').classList.add('rotateright');    
    },100)
});

document.getElementById('button2').addEventListener('click', function() {
    document.getElementById('blue').classList.remove('rotateleft');
    setTimeout(function(){
        document.getElementById('blue').classList.add('rotateleft');        
    },100)
});

document.getElementById('button3').addEventListener('click', function() {
    document.getElementById('red').classList.add('animate');
});

document.getElementById('button4').addEventListener('click', function() {
    document.getElementById('red').classList.remove('animate');
});

Remember to use setTimeout after removing the class to allow time for the transition to take effect.

Answer 5

Answer №3

Give this a try:

    document.getElementById('button1').addEventListener('click', function() {
   var angle += 90;
   var duration = 2;
   document.getElementById('square').style.WebkitTransitionDuration= duration + "s";
   document.getElementById('square').style.transform = "rotate(" +angle + "deg)";
});

You can customize the angle and duration as needed.

Answer 6

Give this a try:

    document.getElementById('button1').addEventListener('click', function() {
   var angle += 90;
   var duration = 2;
   document.getElementById('square').style.WebkitTransitionDuration= duration + "s";
   document.getElementById('square').style.transform = "rotate(" +angle + "deg)";
});

You can customize the angle and duration as needed.

Animating with CSS3 triggered by JavaScript

Answer №1

Answer №2

Answer №3

Similar questions

Rendering with Next.js script

Gradually fade with JavaScript

Rearrange object based on several criteria - JavaScript

Creating Vertical Text and Div Blocks using CSS

Tips for optimizing search functionality in Angular to prevent loading all data at once

Flipping numbers in Arabic font using PDF kit

Trouble accessing webpage on Apple devices

Performing a JSON POST Request: Steps for sending a POST request with JSON data format

Steps for adding a navbar that slides horizontally and overlaps other links on a webpage

Navigating the battleground between native and HTML5 mobile applications

I'm having trouble managing state properly in Safari because of issues with the useState hook

Arranging the placement of the dropdown menu

Error message encountered: ReferenceError - The subcommand specified in Discord.js Slash Command function is undefined

What is the reason behind div elements shifting when hovering over a particular element?

Make sure that the two rows in my Bootstrap table are consistently positioned next to each other, regardless of the length of the text

Utilizing Bootstrap 5's table design to occupy the rest of the available vertical

Change the color of the plotly button when it is clicked

div maintain aspect ratio while scaling

Ensuring Valid Submission: Utilizing Jquery for a Straightforward Form Submission with 'Alajax'

Mapping choices array in ReactJS using the id as a key reference