CSS Transition Not Firing

by

A cleaner approach that does not rely on setTimeout, is to read the css property in question before setting it:

var div = $('<div />').addClass('trans');
$('#container').append(div);
div.css('width');//add this line
div.css('width', '200px');

Working here:

var div = $('<div class="trans" />');
$('#container').append(div);

var div = $('<div />').addClass('trans');
    $('#container').append(div);
    div.css('width');//add this line
    div.css('width', '200px');
.trans {
    width: 20px;
    height: 20px;
    background-color: cyan;
    -webkit-transition: all 5s ease;
       -moz-transition: all 5s ease;
        -ie-transition: all 5s ease;
         -o-transition: all 5s ease;
            transition: all 5s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container"></div>

As explained in the comments below by Lucero, doing it this way is necessary to force the browser to calculate an actual value rather than “auto”, “inherit” or similar. Without an actual value, the browser will not know the new value to be a change from the previous.

More Related Contents:

  1. what’s faster? CSS3 transitions or jQuery animations?
  2. Animate an element’s width from 0 to 100%, with it and it’s wrapper being only as wide as they need to be, without a pre-set width, in CSS3 or jQuery
  3. Why is my jQuery :not() selector not working in CSS?
  4. iframe to Only Show a Certain Part of the Page
  5. $(window).width() not the same as media query
  6. Get element -moz-transform:rotate value in jQuery
  7. Play/pause HTML 5 video using JQuery
  8. How to automatically change the text size inside a div?
  9. jquery IE Fadein and Fadeout Opacity
  10. Activate CSS3 animation when the content scrolls into view
  11. jQuery toggle CSS?
  12. jQuery CSS – Write into the -tag
  13. CSS3 transition on click using pure CSS
  14. jQuery: height()/width() and “display:none”
  15. How to find the highest z-index using jQuery
  16. Selecting only first-level elements in jquery
  17. How to make Bootstrap carousel slider use mobile left/right swipe
  18. How to expand ‘select’ option width after the user wants to select an option
  19. How do you select elements based on their style?
  20. Leave menu bar fixed on top when scrolled [closed]
  21. Why is the window.width smaller than the viewport width set in media queries
  22. Get *all* CSS attributes with jQuery
  23. jQuery CSS() for dynamically created elements
  24. Set background colour of select to selected option in JQuery
  25. Change the body background image with fade effect in jquery
  26. CSS3 equivalent to jQuery slideUp and slideDown?
  27. Weird IE8 layout glitch – why does the body background disappear?
  28. jQuery css gradient
  29. Remove vertical lines in jqGrid
  30. Removing multiple classes (jQuery)

Leave a Comment