這是一種跳過所示的css3動畫的方法嗎？

動畫總是在播放元素時播放：無顯示狀態。如果我想要自定義複選框。我只需要它在用戶選中或取消選中時播放動畫。這是一種跳過所示的css3動畫的方法嗎？

input[type=checkbox] { opacity: 0; } // native checkbox hidden 
input[type=checkbox] ~ .mycheck { 
    animation: uncheck 300ms ease-out forwards; // play uncheck animate 
} 
input[type=checkbox]:checked ~ .mycheck { 
    animation: check 300ms ease-out forwards; // play checked animate 
}

的問題是check和uncheck當用戶點擊它不僅可以播放。它也會在頁面加載時播放。或者當父元素開關隱藏顯示時。例如在引導標籤中。

我知道JavaScript可以輕鬆處理它。但事實上，這個問題來自興趣github項目https://github.com/FezVrasta/bootstrap-material-design/issues/48。那個帥氣的男孩想要通過bootstrap3來實現谷歌材質設計。

目前我可以想辦法（不完美）。當:not(:hover)設置爲animation-duration: 1ms;。讓動畫快速結束。但用戶仍然看起來很短的flickr。

input[type=checkbox]:not(:hover) ~ .mycheck { 
    animation-duration: 1ms; 
}

不能設置爲0ms。否則在用戶將其懸停之前不會播放動畫。

有沒有更好的方法？

來源

2014-09-30 colder

你可以使用你與:not(:hover)想到的解決方案，簡單地取消動畫：

input[type=checkbox]:not(:hover) ~ .mycheck { 
    animation: none; 
}

或者，我認爲這是最好的解決方案，不使用動畫和過渡使用代替。這將導致類似的東西（假設你的動畫不透明度）：

input[type=checkbox] ~ .mycheck { 
    opacity: 0; 
    transition: opacity .3s ease-out; 
} 

input[type=checkbox]:checked ~ .mycheck { 
    opacity: 1; 
}

此外，根據不同的瀏覽器都支持你想實現的，心靈的供應商前綴，如Chrome瀏覽器最近才降到他們的過渡物業

編輯：經過一些測試，我來只使用:focus僞類應該足夠地想：

input[type=checkbox]:focus ~ .mycheck { 
    animation: uncheck 300ms ease-out forwards; 
} 
input[type=checkbox]:focus:checked ~ .mycheck { 
    animation: check 300ms ease-out forwards; 
}

唯一的缺點我能看到的是，當該複選框失去焦點，動畫可能會被取消

來源

2014-09-30 23:09:52

是的，你是對的。但是這種效果很難過渡。這裏是谷歌官方（也許）回購。他們使用動畫來做到這一點：。你的代碼'動畫：無;'是一個更好的選擇。謝謝。 – colder 2014-10-01 11:30:39

'動畫：無;'做其他問題。動畫播放時懸停... – colder 2014-10-01 11:41:26

你說得對，這只是轉移你的問題:(據我所知，CSS沒有辦法直接處理點擊，但你可以使用'：hover'的一些組合和'：focus'，所以只有當你把鼠標懸停在複選框上並且把焦點給了它之後，動畫纔會激活。我將編輯我的答案，讓你知道我在說什麼。 – 2014-10-01 14:41:22

這是一種跳過所示的css3動畫的方法嗎？

回答

相關問題