I have four css classes that seperated based on their functionality, .openModalStyle
and .closeModalStyle
contain appearing/disappearing styles, .openModalTransition
and .closeModalTransition
contain transition property for that styles.
I want to know if the order of tokens matter for classList methods or not, because transition should be attached before styles.
let modal = document.querySelector("modal");
// style before transition
modal.classList.add("openModalStyle");
modal.classList.add("openModalTransition");
// transition before style
modal.classList.add("openModalTransition");
modal.classList.add("openModalStyle");
// want to make sure both work properly in all browsers
.modal{
width: 200px;
height: 200px;
background-color: #f00;
}
/* change opacity */
.openModalStyle{
opacity: 1;
}
.closeModalStyle{
opacity: 0;
}
/* apply transitions */
/* they are repeated styles, but i need to keep them seperated for some reason */
.openModalTransition{
transition: opacity 2s;
}
.closeModalTransition{
transition: opacity 2s;
}
<div ></div>
CodePudding user response:
No, it doesn't matter in the classList
as you just adding a class to the element,
Also, the order at CSS
in most cases doesn't matter, only in some cases it matters, It comes up any time multiple CSS selectors match an element with the exact same specificity.