63497

Why does this CSS transition event not fire when two classes are added?

Question:

CSS

.horizontalTranslate { -webkit-transition: 3s; } .secondClass { background: red; }

HTML

<div class='box'></div>

JS

var box = document.querySelector('.box'); box.addEventListener('webkitTransitionEnd', function(evt) { alert('Finished transition!'); }, false); function transitionBox() { // this works box.className = 'horizontalTranslate'; // this does not work // box.className = 'secondClass horizontalTranslate'; } setTimeout(transitionBox, 100);

Why does the transition event not fire when two classes are added rather than one? I've also tried chaining my CSS selector, a la .secondClass.horizontalTranslate { ... }.

Answer1:

The reason is that box.className = 'horizontalTranslate'; is actually removing styling, causing the CSS transition to actually happen. But when I set box.className = 'secondClass horizontalTranslate';, the styling of the DOM node is not changing and no event is fired.

Another way to write transitionBox is this:

function transitionBox() { box.classList.add('horizontalTranslate'); box.classList.add('blue'); }

If blue changes the styling of box, this works too.

Recommend

  • Call a function init and when Isotope finishes and then reset on next run
  • AngularFire & Ionic - No data form is transmitted to server
  • Matching line width in legend to line width in plot using ggplot2
  • How to set “activate” class to bootstrap navbar in Angular 2 while using page anchor navigation?
  • MVC5 Ajax.BeginForm upload form with files
  • How to find the Custom Field detail of a product backlog item TFS by WIQL
  • “^” in regex pattern make an error
  • document.querySelector with dynamically created content [duplicate]
  • Sonata Admin Bundle custom group icon
  • DART - exception in unit testing
  • How can I compose a VM into a view within an Aurelia validation renderer
  • Toggle DIV state localstorage
  • Javascript onclick does not fire when developer tools are open
  • Create unique ids for a group
  • multiple iron-collapse not working, expands only first
  • Which is performancewise better, check for class or add class [duplicate]
  • Why does this use of getImageData leak memory
  • Finding regular expressions for languages otherwise described
  • Unit test express route calls controller method?
  • Using Node cluster module with SailsJs: EADDRINUSE
  • Issues with wmode=“opaque” and issues with wmmode=“window”
  • display a overlay when input is clicked in react
  • Can someone please explain how this implementation of bucket sort works?
  • Where to put clearQueue in jQuery code
  • avoid automatic jump to bottom on page with iframe video
  • Left fixed columns with table colspan
  • Can a variable be stored within an image or div tag?
  • JSON Error when parsing “… has no method 'replace'”
  • button in popup.html not working
  • Wait for .each() .getJSON request to finish before executing a callback
  • File loader changed image file name but not the file name in HTML file
  • Do query loads all the data in memory
  • How do I get HTML corresponding to current DOM tree?
  • JQuery Internet Explorer and ajaxstop
  • JSON response opens as a file, but I can't access it with JavaScript
  • Change an a tag attribute in JavaScript based on screen width
  • Observable and ngFor in Angular 2
  • How to Embed XSL into XML
  • UserPrincipal.Current returns apppool on IIS
  • Conditional In-Line CSS for IE and Others?