JavaScript event: transitionend

説明

觸發條件:漸變事件結束後。
當指定元素的漸變事件結束後,觸發漸變的listener。

※可以當作動畫延遲出現效果使用

漸變屬性:propertyName

propertyName,漸變改變的CSS屬性

.box2 CLICK IT
.box2
 width: 300px
 height: 200px
 display: flex
 align-items: center
 justify-content: center
 background-color: #c6fffe
 transition-duration: 0.5s
 font-size: 20px
 &:hover
  background-color: darken(#c6fffe, 45%)
document.querySelector(".box2").addEventListener("transitionend", function(e){
 console.log(e.propertyName);//只要漸變一停止,就會回報"background-color"←漸變的CSS屬性
})

範例

.box
 .text SHOW UP
.box
 width: 300px
 height: 200px
 background-color: #bffce8
 display: flex
 justify-content: center
 align-items: center
 transition: background 0.5s
.text
 font-size: 20px
 opacity: 0
 color: #fff
 
.dark
 background-color: darken(#bffce8, 55%)
 
.show
 opacity: 1
var box=document.querySelector(".box");
var text=document.querySelector(".text");

box.addEventListener("click", function(){
 this.classList.toggle("dark");
 
})

box.addEventListener("transitionend", function(e){
 console.log("123");//只要漸變一停止,就會回傳"123"
 if(e.propertyName.includes("color")){
  text.classList.toggle("show");
 }
 /*******使用説明******
 如果文字沒有漸變的話,只要一行toggle就搞定
 但如果文字有漸變,只有一行toggle會一直閃爍
 所以要用if控制文字漸變的時機
 這樣文字就會最後一個出現&消失
 ********************/
 
})

Display (click it)

SHOW UP

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *