重新啓動CSS過渡

我試圖重新啓動在Javascript and without librairies or csstransition。我不希望與像Settimeout或clientHeight一招實現這一目標。我知道這是因爲迴流，但我試圖找到理想的解決方案。重新啓動CSS過渡

步驟如下：

1）Remove過渡 - >設定的新位置（without過渡）

2）Add過渡 - >設定的新位置（with動畫）

這裏是Javascript。

let element1 = document.querySelector(".box") 

document.querySelector("button").onclick =() => { 

    element1.style.transition = "none" 
    element1.style.transform = "translateY(50px)" 

    element1.style.transition = "all 0.4s"; 
    element1.style.transform = "translateY(10px)" 

}

現在只是將過渡和移動10px而不是先設置50px位置。

來源

2017-07-26 zaarr78

是至關重要的是，你使用的過渡？正在使用關鍵幀嗎？ – rebecca

是的，它只使用過渡和沒有CSS或CSS動畫 – zaarr78

您的代碼不工作，因爲瀏覽器不重新計算你的第一和第二「批之間的風格「的更新。

一個竅門是強制瀏覽器調用的是做到這一點的功能之一重新計算它們。我將使用getBoundingClientRect，例如，作爲瀏覽器需要計算方式獲取該元素的大小和位置。

所以：

let element1 = document.querySelector(".box") 
document.querySelector("button").onclick =() => { 
    // Call the first batch of updates 
    element1.style.transition = "none"; 
    element1.style.transform = "translateY(50px)"; 

    // Force the browser recalculate the styles 
    element1.getBoundingClientRect(); 

    // Call the second batch of updates 
    element1.style.transition = "all 0.4s"; 
    element1.style.transform = "translateY(10px)"; 
}

來源

2017-07-26 07:13:58

這會影響性能嗎？ – zaarr78

如果你每秒調用一次，是的，因爲重新計算並不便宜（也取決於HTML節點的數量，CSS複雜度，圖層和其他一系列因素，順便說一下）。你想達到什麼（在批次之間重新計算）不是一件便宜的事情。順便說一句，我不認爲用戶會每秒點擊100次按鈕xD –

我的意思是，如果您不強制重新計算，因爲您沒有調用任何重新計算方法，瀏覽器只是每批次更新都會重新計算一次，但如果您強制執行該操作，則瀏覽器將重新計算每批更新的一次，並且每次更新時都會重新計算一次。有更好的方法來實現這一點，但他們需要CSS或'requestAnimationFrame'（是某種'setTimeout'），所以AFAIK，在這種情況下可以做的最好的就是我的回答。 –

你可以把它沒有任何JS，只是有兩個CSS選擇器：一個描述靜態和另一個使transition目標狀態。

.box { 
 
    background: red; 
 
    height: 100px; 
 
    width: 100px; 
 
} 
 

 
.box:hover { 
 
    transform: rotate(180deg); 
 
    transition: transform .3s linear; 
 
}

<div class="box"></div>

使用這種方式會給你轉換

的一個方向

來源

2017-07-26 07:10:28 smnbbrv

我說沒有CSS在我的問題。我知道這可以輕鬆實現在CSS中，但這是一個約束 – zaarr78

@ zaarr78約束是人爲的，因爲只要你可以寫JS你也可以做CSS。與直接過渡的JS打交道是反模式 – smnbbrv

這是沒有的CSS的項目。目的是編寫代碼而不寫任何css – zaarr78

您可以將事件偵聽添加到transitionEnd事件，然後更改類：

let element1 = document.querySelector(".box"); 

element1.addEventlistener("transitionend", loopTransition(),false); 
element1.addEventListener("webkitTransitionEnd", loopTransition, false); 
element1.addEventListener("mozTransitionEnd", loopTransition, false); 
element1.addEventListener("msTransitionEnd", loopTransition, false); 
element1.addEventListener("oTransitionEnd", loopTransition, false); 


function loopTransition(e) { 
    if (e.propertyName == "transform") { 
     if (element1.className == "stateTwo") { 
      element1.className = "stateOne"; 
     } else { 
      element1.className = "stateTwo"; 
    } 
    } 
}

，如果你不想用你仍然可以使用這個類結構來改變你的造型。

和你第一次的onclick啓動過渡

來源

2017-07-26 07:17:31 rebecca

重新啓動CSS過渡

回答

相關問題