一般資訊
致力于創建我自己的輪播。這個想法是影像在每個輪播“頁面”的開頭慢慢放大。
問題
要達到我正在尋找的結果，我所要做的就是使用過渡更改背景影像的比例。只需將其包裝在一個容器中overflow:hidden，它就可以作業。問題是下一個輪播頁面需要從“縮小”的影像開始。所以規模需要再次設定為1。但是，由于 CSS 類具有過渡，因此縮小不是即時的。
該問題的解決方案應該是簡單地從元素中洗掉類。然后更改比例，最后重新添加類。但是，由于某種原因，這似乎不起作用。
另一個問題是目前scale似乎有一個非常糟糕的瀏覽器支持：https ://caniuse.com/?search=scale
示例代碼
let scaled = false;
const test = document.getElementById("test");
window.addEventListener("click", function()
{
if(scaled)
{
// Remove the class
test.classList.remove("foo");
scaled = false;
// Reset the scale
test.style.transform = "scale(1)";
// Add class back in making sure the animation should be updated
window.requestAnimationFrame(() => {
test.classList.add("foo");
});
}
else
{
// Leave the animation running
scaled = true;
test.style.transform = "scale(0.5)";
}
}).foo {
width: 500px;
height: 500px;
background: blue;
transition: transform 2s;
}<div id="test" class="foo">
</div>您必須在 Firefox 或 Safari 中運行上述截圖，因為目前其他瀏覽器不支持縮放。
在第一次單擊時，影片會按應有的方式播放。在第二次單擊時，影片仍然會播放，而它不應該播放，因為該類已被洗掉。
我的問題
是否有其他方法可以達到相同的效果？（所以根本不要使用比例）為什么盡管類被洗掉了，但它仍然在播放影片？
uj5u.com熱心網友回復：
基于事件回圈的問題。如果你愿意，你可以試試這個帶寬度的解決方案，但實際上不確定你需要那個封面。
const test = document.getElementById("test");
window.addEventListener("click", function()
{
test.style.transition = 'none'
test.style.width = '100%';
window.requestAnimationFrame(() => {
test.style.width = "50%";
test.style.transition = 'width 2s'
});
}).foo {
width: 500px;
height: auto;
background: blue;
}<img src="https://images.freeimages.com/images/large-previews/76e/abstract-1-1174741.jpg" class="foo" id="test"/>轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/486786.html
標籤：javascript html css
上一篇：缺失：使用yuicompressor縮小時在屬性id之后
下一篇：不明白這段代碼如何檢測長度