Sequential queuing of transitions in CSS3

Question

Sequential queuing of transitions in CSS3

Is it possible to queue CSS transitions with the same properties? My goal is to translate an element to a specific position (with a transition duration of 0) before translating it again.

For example, in this mockup, clicking "move" should move the box 100px to the right before translating it 100px to the left.

Why doesn't this work? Does the second transition overwrite the first one?

https://jsfiddle.net/aqwaypoh/3/

I found a solution that works by using a non-zero transition duration (0.01), otherwise the transitionend event doesn't fire.

https://jsfiddle.net/dpv3xzth/5/

Although I was able to fix the issue of the transitionend event firing twice in Chrome, I'm wondering if there is a better way to achieve this without relying on the end event or a timer?

If possible, I would prefer to write this without using the end event or timer. Is there a more efficient approach?

<div class="box"></div>
<a href="#" class="move">move</a></a>

javascript jquery html css

Answer 1

Answer №1

Latest Update:

You have the option to utilize the CSS3 animation property along with @keyframes.

.box.animate {
  animation: move 2s;
}

@keyframes move {
  0% {
    transform: translate(100px);
  }
  100% {
    transform: translate(0px);
  }
}

To trigger the movement of the box, simply add the class animate to your element. Alternatively, you can define the animation property directly in JavaScript based on your preferences.

box.addClass('animate')

Check out the jsfiddle demonstration: https://jsfiddle.net/aqwaypoh/7/

Answer 2

Latest Update:

You have the option to utilize the CSS3 animation property along with @keyframes.

.box.animate {
  animation: move 2s;
}

@keyframes move {
  0% {
    transform: translate(100px);
  }
  100% {
    transform: translate(0px);
  }
}

To trigger the movement of the box, simply add the class animate to your element. Alternatively, you can define the animation property directly in JavaScript based on your preferences.

box.addClass('animate')

Check out the jsfiddle demonstration: https://jsfiddle.net/aqwaypoh/7/

Answer 3

Answer №2

If you add a timeout to the second condition, you should achieve the desired result.

var container = $('.container'),
  button = $('.button').click(function() {
    container.css({
      "transform": "translate(100px)",
      'transition-duration': '0s'
    });

    setTimeout(function(){
       container.css({
         "transform": "translate(0px)",
         'transition-duration': '0.5s'
       });
   }, 1);
  })

Answer 4

If you add a timeout to the second condition, you should achieve the desired result.

var container = $('.container'),
  button = $('.button').click(function() {
    container.css({
      "transform": "translate(100px)",
      'transition-duration': '0s'
    });

    setTimeout(function(){
       container.css({
         "transform": "translate(0px)",
         'transition-duration': '0.5s'
       });
   }, 1);
  })

Sequential queuing of transitions in CSS3

Answer №1

Answer №2

Similar questions

Transferring form data to an external webpage and fetching the HTML response from the server

Using JQUERY to create a dropdown menu that dynamically changes based on the date field

The font from the server is not displaying correctly in the local HTML file

Change classes of sibling elements using Angular 2

The div's coloring extends beyond the margins

Transferring a JavaScript variable to C# to execute an SQL SELECT query, then sending the returned result back to JavaScript

Classes aren't displaying properly for elements inside

What could be causing the element.style.FontSize to not be effective on classes that have been looped through and stored in an array created with querySelectorAll beforehand?

"I seem to be unable to retrieve all the data points for the X and Y axes on my nvd3 graph. Could there be some options that I am

What methods can be used to protect (encrypt using Java code) the information in a login form before it is sent to a servlet for

Organize express controller by breaking it up into multiple separate files

Inspect Element - base tag href URL for inline CSS allocation

Exploring the world of jQuery waypoints and the art of modifying

Streamlining all icons to a single downward rotation

What is the best way to handle the return value from using indexOf on a string?

Strangely compressed HTML image

Pause a YouTube video automatically when the window is not in focus using FancyBox

PHP Query Composer/Reporter

What is the best way to utilize *ngFor for looping in Angular 6 in order to display three images simultaneously?

Modifying the default class styles from Bootstrap based on the HTML displayed in Devtools