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

Ensure your mobile device is age 13 or over before proceeding

Put the code inside a function. I'm new to this

css Sibling elements restricted within parent container

What could be causing the extra space at the top of my div element?

What could be the reason for the malfunction of jQuery's show() function?

Help with Crafting Responsive CSS Design

When a nested CSS Grid is inserted into an HTML table element, it causes horizontal overflow

Creating responsive images using Bootstrap CSS framework

What could be causing my form to not be centered on the screen?

Is it possible to use jquery to specifically target classes?

Excess space appearing to the right of the text box in Internet Explorer 9 standards mode and Google Chrome

Issue with jquery_ujs: Font Awesome spinning icon animation functions properly in Chrome but not in Safari

Inject CSS values dynamically

Is there a way to spin the picture but keep the container still?

Text that spans across multiple lines

Show the final element in a list in a new and innovative style

Safari iOS does not display any background for Buttons

The sticky navigation and scroll to top features both function perfectly on their own, but when used simultaneously, they do not work

Tips for adjusting the placement of enlarged images within colorbox

Adjust the size of the buttons based on the width of the screen