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

I keep encountering an issue with getJson

A snippet of my JavaScript code retrieves a JSON object from a URL. Here is the portion of the code in question: <script> $(document).ready(function(){ $("button").click(function(){ $.getJSON('url_address', {}, function(data) { ...

What are the best practices for storing an array of objects in MongoDB with Mongoose?

For my project, I needed to store data in a mongoDB document as an array of objects using Javascript, Node JS, Express framework, and Mongoose library. After researching online, I found two different methods to achieve this: Creating another sub-schema ...

Building VSCode on Windows: A step-by-step guide

I am currently in the process of compiling https://github.com/Microsoft/vscode from the source code, but I am facing some challenges. After successfully running scripts\npm.bat install, I proceeded to run scripts\code.bat and a strange window app ...

Enhance the appearance of a button in Rails by incorporating custom styles or images

I am currently working with Rails and I am curious if there are any simple ways to enhance the appearance of the button_to control. Is it possible to style the <%= submit_tag 'Log in' %> or <%= button_to "Show Me", {:controller => ...

Is there a more efficient method for implementing server side rendering in a Next.js application?

Currently, I am implementing server-side rendering in my Next.js application. This specific component is responsible for returning HTML content. I'm wondering if there are more efficient methods available? import Feature from 'components/home/Fea ...

AngularJS - sorting JSON data based on key values

I am working with a JSON data set that I need to filter based on the selected option value. The select input is bound to an ng-model, but for some reason, the filter isn't functioning properly. Can anyone spot what mistake I might be making? This is ...

Applying styled text to a Node.js chat application

I developed a chat application using node.js which allows users to enter a username and send messages. The messages are displayed in a <ul> format showing "username: message". I was looking for a way to make the username appear bold and in blue color ...

Utilizing jQuery and AJAX for submitting multiple POST requests

Experiencing a problem with posting data via AJAX using a drag and drop interface. The data is being sent to the POST URL as intended, but there's a recurring issue where the POST request occurs twice, causing the processing URL to handle the data aga ...

What is causing a single state update when setState is called twice in React?

It seems like I'm making a beginner mistake in React as I am trying to call the "addMessage" function twice within the "add2Messages" function, but it only registers once. I believe this issue might be related to how hooks work in React. How can I mod ...

The placement is set to absolute, with a designated height

Here is an example http://jsfiddle.net/HnfCU/ I am using jQuery to toggle the visibility of the .child div. The position of the .child is set to absolute relative to its parent element, .parent. The challenge I am facing is adjusting the height of the .ch ...

angular-bootstrap-mdindex.ts is not included in the compilation result

Upon deciding to incorporate Angular-Bootstrap into my project, I embarked on a quest to find a tutorial that would guide me through the download, installation, and setup process on my trusty Visual Studio Code. After some searching, I stumbled upon this h ...

Is there a way for me to choose multiple checkboxes simultaneously?

I have a dynamically created HTML table with checkboxes added for each row. $.each(data, function(id, value) { rows.push('<tr><td><input type="checkbox" autocomplete="off" class="chkbox" name="chkbox" value="'+value.site+' ...

Creating flexbox items with equal height

I have a flexbox parent with flex-direction set to row. Within this parent, I have two children that I want to have the same height! Both of these children contain dynamic content with varying heights. The issue I'm facing is that when I add text t ...

When incorporating <Suspense> in Next.js, the button's interaction was unexpectedly lost

'use client' import React, { Suspense } from "react"; const AsyncComponent = async () => { const data = await new Promise((r) => { setTimeout(() => { r('Detail'); }, 3000) }) as string; return <div>{d ...

Tips for converting ActiveRecord hierarchy into a JavaScript array

Currently, I am in the process of incorporating a treeview feature into my institution model within my rails application. To accomplish this, I have integrated the ancestry gem into my model successfully and included the treeview component into my view wit ...

conceal menu upon click (gradually disappear)

This is a basic HTML/CSS menu. Currently, it is functioning properly for page redirection (href). However, I would like it to hide after being clicked on. I plan to call a function that will initiate an AJAX request upon clicking. Here is the code on JS ...

Experiencing a console error which reads: "SyntaxError: Missing ) after argument list."

While working on configuring a new React CSR app and incorporating some boilerplate libraries, I encountered an error in the console: Uncaught SyntaxError: missing ) after argument list (at @emotion_react_macro.js?v=30f6ea37:29894:134) I am hesitant to ma ...

javascript Href and onclick malfunctioning

I am encountering an issue with a form on my webpage: <form name="myForm" id="myForm" method="post" action="someUrl.php"> ... </form> There is a div outside of this form which contains an anchor link: <a href="anotherUrl.php" onclick="doc ...

Tips for triggering an event from a function instead of the window

Everything is functioning as expected, with the event listener successfully capturing the custom event when it is dispatched from the window and listened for as loading, all seems to be working well. const MyLib = mylib(); function mylib() { const re ...

Angular8: Adjusting Activity Status After Leaving Page

When performing activities like upload, download, delete, and edit, I display statuses such as 'upload started' or 'upload completed'. This works perfectly when staying on the same page. However, there are instances where a user may nav ...