是否有一個跨瀏覽器解決方案僅使用CSS而不使用javascript來生成幻燈片過渡？以下是html內容的示例：<div> <img id="slide" src="http://.../img.jpg /></div>
3 回答
PIPIONE
TA貢獻1829條經驗 獲得超9個贊
使用CSS3 2D transform避免性能問題（移動）
甲常見缺陷是有生命的left/ top/ right/ bottom屬性，而不是使用CSS變換，以實現相同的效果。出于各種原因，變換語義使它們更容易卸載，但left/ top/ right/ bottom更難。
資料來源：Mozilla開發人員網絡（MDN）
演示：
var $slider = document.getElementById('slider');
var $toggle = document.getElementById('toggle');
$toggle.addEventListener('click', function() {
var isOpen = $slider.classList.contains('slide-in');
$slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
});
#slider {
position: absolute;
width: 100px;
height: 100px;
background: blue;
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
.slide-in {
animation: slide-in 0.5s forwards;
-webkit-animation: slide-in 0.5s forwards;
}
.slide-out {
animation: slide-out 0.5s forwards;
-webkit-animation: slide-out 0.5s forwards;
}
@keyframes slide-in {
100% { transform: translateX(0%); }
}
@-webkit-keyframes slide-in {
100% { -webkit-transform: translateX(0%); }
}
@keyframes slide-out {
0% { transform: translateX(0%); }
100% { transform: translateX(-100%); }
}
@-webkit-keyframes slide-out {
0% { -webkit-transform: translateX(0%); }
100% { -webkit-transform: translateX(-100%); }
}
<div id="slider" class="slide-in">
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Dolor</li>
</ul>
</div>
<button id="toggle" style="position:absolute; top: 120px;">Toggle</button>
- 3 回答
- 0 關注
- 901 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消