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

i'm trying show form's submit , reset buttons once user has made changes form. original method simple: add hidden class buttons on page load , remove when form modified. works enough. when add transition in mix, transition takes place when add hidden class on page load, unwanted.

here relevant code (or see 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: 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 enable transition after hidden class has been added first time?

you move transition own class well. on page load, add hidden class, then, after timeout, add transition class.

the timeout, in case, let browser apply/render opacity: 0 style of hidden class immediately, without transition timing. once has occurred, adding transition class causes further changes use transition timing when applicable.

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