---
tags: [event]
title: transitionend event
---
### transitionend

這個是在 css transition 結束時會觸發的 event

/* html => <div class='hover'>Hover Dom</div> */
.hover{
  width: 100px;
  min-height: 40px;
  background-color: #2dd4bf;
  border-radius: 4px;
  text-align:center;
  line-height: 38px;
  transition: 0.5s;
  cursor: pointer;
}
.hover:hover{
  background-color: #0f766e;
}

const dom = document.querySelectorAll('.hover')[0]
dom.addEventListener('transitionend',function(){
  console.log('transitionend');
})

[demo](https://codepen.io/coreisdontgu/pen/zYarBPY)