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..

    How to rotate image in relation to mouse position?

    DropDown Menu won't show for more than a second..not working.

    How to change anchor color when you hover over a list

    Every third post excerpt shows up on its own line

    How to hide a div class in Wordpress? CSS

    why is .show() making the target div appear at top of page?

    How to prevent this css shape to scroll left and right

    How do I iterate through array and set classes individually?

    CSS 2 Sass: How do I change the output format of the generated SCSS?

    How to place object in relation to window browser in css/html?

    How to flip background image using CSS?

    How to give menu sub menu options

    How to find the css class of an anchor link inside a cross domain iFrame?

    How to hide and show a
    onclick when there's already an action for click?

    How can i override this css behavior with jquery?

    How to rotate the background image in css?

    How to animate a div when another div is clicked and how to make the animated div move other elements

    How to keep images fixed but also responsive so they don't overlap

    How can you keep the “theme” of your website and add new dynamic pages? [closed]

    How to switch css based table column with nested content using jquery?

    How to make a HTML spinner with CSS

    How can I stop the submit button from stacking under the text field on a bootstrap form?

    Show dropdown menu only when hovered on span in li

    CSS - How to make position:absolute work not on all 100% screens area

    How to place Facebook send dialog box above other content?

    How can I get css pseudo element :checked to work in IE7 + IE8?

    How to refer to an image with a certain id thats into a section with a certain id - CSS

    How to avoid third party CSS to affect current CSS? [closed]

    CSS: How to build a vertical separator with margin on its top and bottom? [closed]

    how is the search mail button implemented?