Triggering transitionend event once with an added if condition

Question

Triggering transitionend event once with an added if condition

Currently, I have an application of an if statement that examines whether an element contains a style attribute. In the event that the style attribute is absent, it appends inline styling. Conversely, if the style attribute exists, it is removed. Furthermore, I am utilizing a transition in conjunction with the appended styling.

My objective is to execute //something following the conclusion of the transition utilizing transitionend. However, a persistent challenge I encounter is that each subsequent click on the element generates another transitionend event.

To better illustrate this issue, I have created a demonstration on JSFiddle.

I would greatly appreciate any assistance with this matter.

javascript jquery css css-transitions

Answer 1

Answer №1

Remove event listener before initializing it

$('.box').unbind(transEnd);

This technique significantly reduces the number of alerts displayed

Previously: an increasing number were being displayed

Now: only 3-4 are shown each time

Answer 2

Remove event listener before initializing it

$('.box').unbind(transEnd);

This technique significantly reduces the number of alerts displayed

Previously: an increasing number were being displayed

Now: only 3-4 are shown each time

Answer 3

Answer №2

Each time a button is clicked, a new transitionEnd event handler is being added. It would be more efficient to have a single handler outside of the click function.

$('button').on('click', function () {

    var currentStyle = $('.box').attr('style')

    if (typeof currentStyle !== typeof undefined && currentStyle !== false) {
        $('.box').removeAttr("style");
    } else {
        $('.box').css('border-color', 'blue');
    }

});
var transEnd = 'transitionend webkitTransitionEnd oTransitionEnd'
$('.box').on(transEnd, function (e) {
    console.log(e.type, e.originalEvent.propertyName, e)
});

Another approach could be to utilize .one() to set up a handler that will fire only once like this:

$('button').on('click', function () {

    var currentStyle = $('.box').attr('style')
    var transEnd = 'transitionend webkitTransitionEnd oTransitionEnd'

    if (typeof currentStyle !== typeof undefined && currentStyle !== false) {
        $('.box').removeAttr("style");
    } else {
        $('.box').css('border-color', 'blue');
    }

    $('.box').one(transEnd, function (e) {
        alert('transition ended');
    });

});

Answer 4

Each time a button is clicked, a new transitionEnd event handler is being added. It would be more efficient to have a single handler outside of the click function.

$('button').on('click', function () {

    var currentStyle = $('.box').attr('style')

    if (typeof currentStyle !== typeof undefined && currentStyle !== false) {
        $('.box').removeAttr("style");
    } else {
        $('.box').css('border-color', 'blue');
    }

});
var transEnd = 'transitionend webkitTransitionEnd oTransitionEnd'
$('.box').on(transEnd, function (e) {
    console.log(e.type, e.originalEvent.propertyName, e)
});

Another approach could be to utilize .one() to set up a handler that will fire only once like this:

$('button').on('click', function () {

    var currentStyle = $('.box').attr('style')
    var transEnd = 'transitionend webkitTransitionEnd oTransitionEnd'

    if (typeof currentStyle !== typeof undefined && currentStyle !== false) {
        $('.box').removeAttr("style");
    } else {
        $('.box').css('border-color', 'blue');
    }

    $('.box').one(transEnd, function (e) {
        alert('transition ended');
    });

});

Triggering transitionend event once with an added if condition

Answer №1

Answer №2

Similar questions

What is the best way to incorporate a percentage-based width scrollbar?

ReactJS: Alert for controlled form element

Retrieve the id of an element from a JSON object

Serialization in .NET and the weekcalendar: events that are not defined

Exclude crypto-browserify from the NextJS build process

The function and if-else statement are experiencing malfunctions

Difficulty in defining the impact of a function on a single menu

Do lengthy words sink while short words swim?

What's the best way to organize Python objects for optimal JSON serialization?

What is the best way to maintain the same height for a textarea and input fields?

What is causing my background image to move upward when I include this JavaScript code for FlashGallery?

Encountered an issue while trying to reset the dropdown menu values on a Dash application when utilizing a clear button

Creating responsive images in a navbar with HTML and CSS

Transform the MUI Typescript Autocomplete component to output singular values of a specific property rather than a complete object

Issue with CSS background images

Clicking on a checkbox within an HTML table that incorporates handlebar and Express.js

Encountering a 403 error while attempting to retrieve an image

Change to the parent frame using webdriver

The wp email feature is malfunctioning under certain circumstances

The form submits immediately after jquery is activated