CODEWITHSUNDEEP
css-transitions
Shawn
Shawn

Reputation: 11391

How can I control when my css transitions happen and when they don't?

I'm trying to show a form's submit and reset buttons only once the user has made changes to the form. My original method is simple: add a hidden class to the buttons on page load and remove it when the form is modified. This works well enough. But when I add a transition in the mix, the transition takes place when I originally add the hidden class on page load, which is unwanted.

Here is the relevant code (or see it live on jsfiddle):

html

<form>
    <input type="text" />
    <input type="submit" value="Save" />
    <input type="reset" value="Reset" />
</form>

CSS

input[type=submit], input[type=reset] {
    transition: all 0.6s ease-in-out;
    &.hidden {
        opacity: 0;
    }
}

javascript (using JQuery 1.9.1)

$(document).ready(function () {
    var buttons = $('input[type="submit"], input[type="reset"]').addClass('hidden');
    $('form').on(
        'change input',
        ':input',
        function () {
            buttons.removeClass('hidden');
        }
    ).on(
        'reset',
        function () {
            buttons.addClass('hidden');
        }
    );
});

How can I enable the transition only after the hidden class has been added the first time?

Upvotes: 1

Views: 55

Answers (1)

dc5
dc5

Reputation: 12441

You could move the transition to its own class as well. On page load, add the hidden class, then, after a timeout, add the transition class.

The timeout, in this case, is to let the browser apply/render the opacity: 0 style of the hidden class immediately, without any transition timing. Once that has occurred, adding the transition class causes any further changes to use the transition timing when applicable.

something like (jsfiddle): 

$(document).ready(function () {
    var buttons = $('input[type="submit"], input[type="reset"]').addClass('hidden');

    window.setTimeout(function() { buttons.addClass('txclasshere'); }, 0);
    $('form').on(
        'change input',
        ':input',
        function () {
            buttons.removeClass('hidden');
        }
    ).on(
        'reset',
        function () {
            buttons.addClass('hidden');
        }
    );
});

Upvotes: 1

Related Questions