JavaScript and CSS execution order?

JS section: 

function removeTransition(e) {
          if (e.propertyName !== "transform") return;
           e.target.classList.remove("playing");
         }
keys.forEach(key => key.addEventListener("transitionend", removeTransition));

css section: 

.key {
  transition: all .07s ease;
}
.playing {
  box-shadow: 0 0 1rem -sharpffc600;
  transform: scale(1.1);
  border-color: -sharpffc600;
}

the rest of the code is mainly to listen for the keydown event on the keyboard. When a key is pressed, execute: 

key.classList.add("playing");

what I don"t clear is when removeTransition is called? And after .remove ("playing") , when will the new style be rendered?

it is found that when the browser processes css, it will terminate the execution of JS first. When is the transitioned event triggered?

Javascript css
Mar.03,2021
The

transitionend event is triggered after the CSS transition ends.

in your example, transitionend does trigger multiple times.

such as 



</div>

js: 

function fun_transitionend(){
    console.log("transition end");
}
function fun_hover(){
    console.log("start event binding");
    document.getElementById("transition_div").addEventListener('transitionend',fun_transitionend);
}

css: 

.transition_div{
    height:100px;
    width:100px;
    background:red;
    -webkit-transition:width 5s;
    -moz-transition:width  5s;
    -ms-transition:width  5s;
    -o-transition:width  5s;
    transition:width  5s;
}
.transition_div:hover
{
    width:300px;
}
When the

graph begins to transition the width, the event binding code starts to execute, and the transitionend event handler is triggered when the transformation is complete.

Previous: On the problem that the width of the parent element is not stretched out after the column swap in the vertical column layout of css flex layout wrap

Next: How does ai output svg (with path)? what we output here is style.

css mysql arrays josn react html typescript webpack npm sass R objective-c .net sql-server jquery python-3.x angularjs django angular excel regex iphone ajax linux xml pandas vba spring database wordpress string wpf xcode windows bash postgresql oracle multithreading eclipse list firebase algorithm macos forms image scala visual-studio azure bootstrap spring-boot react-native python-2.7 docker performance function winforms matlab powershell apache dataframe api sqlite numpy rest shell selenium flutter dart maven loops qt swing android-studio csv express file class tensorflow sorting codeigniter perl
© 2021 CodesHelper
Advertising Contact us About us
Menu