CSS animation fails to execute

Question

CSS animation fails to execute

I created a rotating carousel using CSS. The carousel is constructed using the 'ul' tag. To navigate left or right, I dynamically add a 'li' element to the left or right of the list by cloning the necessary value and appending/prepending it. Then, I adjust the left value of the 'ul' and utilize CSS transitions to move the 'ul' for the animation effect, achieving continuous navigation with animations.
The animation functions perfectly for the 'next' navigation, but encounters issues when moving 'back'. The puzzling part is that when debugging the 'back' code, the animation actually works! (Could it be a timing issue? If so, why does the 'next' direction work???)

For a demonstration of the problem, click here: jsfiddle

Please note: This is not my actual code. My real code is encapsulated in an object-oriented plugin, with validations for scenarios like rapid forward and backward clicking by the user, and a polyfill for Internet Explorer using jQuery 'animate'. I also explored using a pre-made plugin, but none of them met the specific requirements I had…

jquery css jquery-plugins css-transitions carousel

Answer 1

Answer №1

This problem is quite puzzling to me; when I insert alerts in the middle (around the addClass call), it seems to have some effect. It may be related to the browser's DOM update timing, which, to me, is a significant cause for concern in terms of compatibility.

Since you're already using jQuery, I recommend switching to jQuery animations instead. The code is more concise, the functionality is well-supported, and it works in browsers without CSS3 compatibility. I've created a fiddle based on your code that achieves the same result as your code, but utilizes .animate() instead.

It's worth noting that I utilized the swing jQuery easing in the example; if you require additional easing options (such as the ease-in-out from your CSS), consider using the jQuery easing plugin.

Here's the code snippet used (attached to the .prev button):

$('.prev').on('click', function() {
    var $childelement = $('ul');
    $childelement.children('li').last().clone().prependTo($childelement);
    $childelement.css({
        'left': '-150px'
    }).animate({ 'left': '-50px' }, 400, "swing", function() {
        console.log('transition ended');
        $childelement.children('li').last().remove();
    });
});

Answer 2

This problem is quite puzzling to me; when I insert alerts in the middle (around the addClass call), it seems to have some effect. It may be related to the browser's DOM update timing, which, to me, is a significant cause for concern in terms of compatibility.

Since you're already using jQuery, I recommend switching to jQuery animations instead. The code is more concise, the functionality is well-supported, and it works in browsers without CSS3 compatibility. I've created a fiddle based on your code that achieves the same result as your code, but utilizes .animate() instead.

It's worth noting that I utilized the swing jQuery easing in the example; if you require additional easing options (such as the ease-in-out from your CSS), consider using the jQuery easing plugin.

Here's the code snippet used (attached to the .prev button):

$('.prev').on('click', function() {
    var $childelement = $('ul');
    $childelement.children('li').last().clone().prependTo($childelement);
    $childelement.css({
        'left': '-150px'
    }).animate({ 'left': '-50px' }, 400, "swing", function() {
        console.log('transition ended');
        $childelement.children('li').last().remove();
    });
});

CSS animation fails to execute

Answer №1

Similar questions

What is the best way to swap out text for an image in CSS?

What is the best method for arranging multiple images in a grid while keeping them within a specific maximum width and height?

Incorporate the ajax response into the design of the Material Design

"Double triggering of window scroll event observed in IE8, occurring two times instead of a

Is it possible to create a similar design that is also responsive?

Resetting a JQuery button to its initial state

Creating dynamic web pages with jQuery is a simple and effective

The back button fails to refresh the page on a website utilizing Ajax technology

The issue arises when attempting to execute an Ajax function within a JQuery append method, causing malfunction

JavaScript code to make titles slide in as the user scrolls

What is the best way to ensure a textarea element fills the entire height using Bootstrap 4?

Tips for creating inline links

The browser is only showing particular changes made to the CSS file

Using CSS to style the footer with a body height set to 100%

In Internet Explorer versions 7 and 8, a transparent overlay div enables click-through functionality

There seems to be a problem with the while loop in the PHP code while creating a forum

Resetting the CSS for an input field: a step-by-step guide

Can different classes be assigned as "dragenter" targets?

Is it possible to leverage the className attribute in Material UI components?

What can I do to keep my navbar on top of the slideshow?