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 override CSS

    How to force elements to stay in the same row

    How to apply css to link in dropdown table using arrow keys and hover event?

    Bootstrap 3 / CSS: How to properly vertically align in panel heading

    How to reanimate div with jquery after using css keyframe animation

    Shadow DOM: how to apply CSS style only if the host element is ?

    php search result images show across and fill a CSS div

    CSS: How to set image width larger than the container's [closed]

    How to hide

    How to display grid line on top of highchart

    How do I stop richfaces adding borders to panels and calendars?

    How to share js/css/images across Rails applications?

    how can i prevent to take input onkeypress anything other than alphanumeric

    How To Sync CSS Animations Across Multiple Elements?

    HTML layout with vertical divider and menu between sections - how?

    How to dynamically change the color of the selected menu item of a web page?

    how do I use standard GWT CSS style themes from non-GWT pages?

    How to make JS/Jquery Css and HTML popup

    How to display .toggle or .Animate to all connected browser sessions using Meteor

    How to add content to an input with css? [duplicate]

    How to apply css transform on iOS without using -webkit-transform?

    How do I add a border to an (8 point star) css shape?

    How to keep css id to the 'li' in css

    How to integrate Thread and

    tooltip box not showing using css

    How can I use Perl to get a list of CSS elements with a color or background color attribute?

    How to load different CSS based on the category of the post on WP

    How to fix this arrow shape created using CSS in IE9

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

    How to set the universal CSS selector with JavaScript?