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


Tags: css-transitions

Problem :

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?



Solution :

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');
        }
    );
});

    CSS Howto..

    CSS select: how to count and select child of a specific class only?

    jQuery - How to show element when another has a value

    How to apply css to buttons inside gridview

    How do you use CSS Selectors to select multiple elements? [duplicate]

    Bootstrap and CSS: how to make a text area (div) behave like a responsive image

    How to auto width a form element with CSS?

    How do you measure the height of a HTML element scaled with CSS3 transform?

    CSS - How to use by ID and by class

    How to apply an image to a CSS ordered list in WordPress?

    How to avoid css and scripting effect when input on textbox

    CSS: how to add a style to everything, unless it is defined

    How to scale jumbotron bootstrap on larger monitors?

    CSS - Table mode how to display correctly?

    How to create a master page using HTML? [closed]

    How to overwrite css animation

    How to create and manage large CSS projects?

    How to remember style changes?

    Show header when at top of page - Scroll event re-firing issue

    Element width based on how many siblings are present

    How to center arrow on post carousel

    How to use Javascript to get a visitors monitor resolution?

    How does max-width property make images responsive?

    How to Stop Overriding of Bootstrap Css Styles

    How to have a background image size (without affecting the div)?

    How to show/hide content based on a css class

    How to make one string from a sentence capital in HTML/CSS?

    How to make 2 level scrolling tab in CSS like this in HTML 5

    How to avoid setting CSS class to one table among two tables?

    How can I prevent this plugin from popping up from behind the content area?

    How to change visibility of Calendar on textbox click