The transitionend event fails to trigger if there is no active transition taking place

Take a look at this:

http://jsfiddle.net/jqs4yy0p/

JS

$('div').addClass('switch').on('transitionend', function(e){
    alert('end');
});

CSS

div {
    background-color: red;    
    /*transition: background-color 1s;    */
}

div.switch{
    background-color: blue;
}

If you remove the transition property, no event is being triggered. It seems transitions are essential for controlling events through JavaScript.

Imagine creating a slider and wanting to preload the next image once the transition effect finishes. Without the transition effect in CSS, everything falls apart.

Is it just me, or do transitions seem somewhat useless if they still require mixing with JavaScript to be fully effective?

Answer №1

To clarify, it's important to note that CSS transitions/animations can function independently from JavaScript event listeners like transitionend. Although JS can still play a role in triggering these animations, they are not strictly necessary for their implementation.

However, utilizing transitionend events can be beneficial when you want to synchronize JavaScript actions with CSS transitions, allowing for smoother interactions on your webpage.

For example, checking if an element has a transition set using:

$('div').css('transitionDuration') !== '0s'

can help guide your scripting decisions.

A QUICK DEMO showcasing this functionality is available based on your jsfiddle.

In the case of the "slider thing," simply swapping images with JS can work effectively even without smooth transitions, though adding CSS transitions can enhance the user experience. Omitting transitions may impact functionality less than neglecting other essential CSS properties like position, width, height, and opacity.

In my opinion, the availability of events/listeners related to CSS transitions/animations does not render them obsolete. Comparing this to deeming CSS pseudo elements redundant because additional HTML elements can serve the same purpose overlooks the benefit of maintaining separation between content, styling, and logic layers based on individual preferences and specific project requirements.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Deleting an item from a JSON object using Angular

Whenever I click on an item in the list, it generates an input text and adds the attributes of that input to a JSON. Currently, each time I click on an item multiple times, the JSON accumulates all the clicks. For instance, if I click 3 times on the first ...

How to make a Material UI Dialog Box automatically expand to fit the Dialog Content Area

In my project, I am working on a Dialog component which has a maximum width and a minimum height. Inside the DialogContent, I want to have a Box element that stretches to fill out the remaining space of the DialogContent. The goal is to have a background i ...

Is it possible to use JavaScript to make a CSS animation mimic the behavior of a :hover effect?

My CSS animation looks like this: HTML: <div class="container" id="cont"> <div class="box show"></div> </div> CSS: .container { width: 100vw; height: 100vh; } .box { position: absolute ...

How to customize the background of radio buttons in HTML

I want the background color to stay consistent as lightgray for each <ul>. Currently, clicking the radio button causes the ul's background to change incorrectly. I am unsure of how to loop through all available ul elements using jQuery and woul ...

Using Button Elements to Initiate Server Requests in Node.js

I'm currently in the process of designing a menu for my Node JS application and I'm struggling to find a way to send server requests without relying on the browser's navigation bar. Here is how my directory structure is organized: /applica ...

Implementing Express.js allows for the seamless casting of interfaces by the body within the request

I have created a similar structure to ASP.NET MVC and uploaded it on my github repository (express-mvc). Everything seems fine, but I am facing an issue with casting the body inside the request object to match any interface. This is what I am aiming for: ...

Enhancing Donut Chart with d3.js

After working for several hours, I'm having trouble getting my d3.js donut graph to update with new data. Here's my HTML: <body> <div id="pie"></div> <script src="pie.js"></script> </body> And he ...

Challenges with synchronizing Highcharts horizontally

I have been working on implementing synchronized charts in my application by using the example code provided by Highcharts here. My layout consists of columns created with the Materialize framework, and I placed the charts side by side in a row. However, I ...

Stop Scrolling on Web Pages with HTML5

I need assistance in preventing all forms of page scrolling within my HTML5 application. Despite searching on popular platforms like SO and Google, I have been unable to find a comprehensive solution for disabling all scrolling mechanisms entirely. Existin ...

Ways to incorporate encoded HTML text into string literals

When attempting to insert a HTML encoded special character within a string literal, I am encountering an issue where it does not display as intended in the final document. The approach I am taking is as follows: const head = { title: `${ApplicationName} ...

Unable to store simple HTML file using service worker

I am working on a webpage that displays a message when the user is offline. However, I am facing an issue with my service worker while trying to cache the page. The Chrome console always throws this error: service-worker.js?v=1:1 Uncaught (in promise) D ...

Exploring outside iframe data

My webpage includes an iframe A with a src attribute that links to a URL containing another embedded iframe B. I'm trying to figure out if it's possible to access the src of this nested iframe B. However, it appears that browser security measures ...

What is causing my array of objects to constantly accumulate undefined elements?

My quick sort function implementation for the object users_total_likes is behaving unexpectedly. When compiled and run in the terminal or browser, it adds undefined values causing a TypeError: if(users[i][key] >= users[hi][key] && users[j][key] ...

What is the best way to line up three divs horizontally and center the contents inside each one?

I'm brand new to CSS and need some help simplifying things. I am trying to create 3 divs that are all the same size, placed next to each other, with centered content in each one. Currently, I have a central div with a rotating image, and on the left a ...

Leveraging the Google Feed API using jQuery's AJAX functionality

Currently, I am attempting to utilize Google's Feed API in order to load an RSS feed that returns a JSON string. (For more information, please refer to: https://developers.google.com/feed/). Despite this, my approach involves using jQuery's AJ ...

Extracting key values from JSON using Node.js

Trying to read a json file using nodejs and locating a specific key within the object is my current task: fs.readFile('./output.json', 'utf8', function(err, data) { if (err) throw err; console.log(Object.keys(data)); } ...

Tips for dynamically loading images in React with a Collage component

It appears that all the examples I've come across are static in terms of loading images. While the code works, it does not display the divider <div> tag as expected. Instead, the results (images) are shown stacked in the first item of the Collag ...

How to dynamically change the color of a button in a list in Vue.js when it is clicked

I am working on a dynamic list of buttons that are populated using an array of objects: <div class="form-inline" v-for="(genre, index) in genreArray" :key="index" > ...

What is the most effective method for handling extremely large Long numbers in Ajax?

When it comes to Javascript, all numbers are represented as double-precision floating-point. This can result in a loss of precision when handling numbers that exceed the 64 bit Java Long datatype limit of 17 digits. For instance, a number like: 7143412520 ...

How can you apply a class to a different element by hovering over one element?

Is there a way to darken the rest of the page when a user hovers over the menu bar on my website? I've been playing around with jQuery but can't seem to get it right. Any suggestions? I'm looking to add a class '.darken' to #conte ...