猿问

CSS 3从左侧过渡插入

是否有一个跨浏览器解决方案仅使用CSS而不使用javascript来生成幻灯片过渡?以下是html内容的示例:


<div>

    <img id="slide" src="http://.../img.jpg />

</div>


肥皂起泡泡
浏览 865回答 3
3回答

PIPIONE

使用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() {&nbsp; &nbsp; var isOpen = $slider.classList.contains('slide-in');&nbsp; &nbsp; $slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');});#slider {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; width: 100px;&nbsp; &nbsp; height: 100px;&nbsp; &nbsp; background: blue;&nbsp; &nbsp; transform: translateX(-100%);&nbsp; &nbsp; -webkit-transform: translateX(-100%);}.slide-in {&nbsp; &nbsp; animation: slide-in 0.5s forwards;&nbsp; &nbsp; -webkit-animation: slide-in 0.5s forwards;}.slide-out {&nbsp; &nbsp; animation: slide-out 0.5s forwards;&nbsp; &nbsp; -webkit-animation: slide-out 0.5s forwards;}&nbsp; &nbsp;&nbsp;@keyframes slide-in {&nbsp; &nbsp; 100% { transform: translateX(0%); }}@-webkit-keyframes slide-in {&nbsp; &nbsp; 100% { -webkit-transform: translateX(0%); }}&nbsp; &nbsp;&nbsp;@keyframes slide-out {&nbsp; &nbsp; 0% { transform: translateX(0%); }&nbsp; &nbsp; 100% { transform: translateX(-100%); }}@-webkit-keyframes slide-out {&nbsp; &nbsp; 0% { -webkit-transform: translateX(0%); }&nbsp; &nbsp; 100% { -webkit-transform: translateX(-100%); }}<div id="slider" class="slide-in">&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; <li>Lorem</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>Ipsum</li>&nbsp; &nbsp; &nbsp; &nbsp; <li>Dolor</li>&nbsp; &nbsp; </ul></div><button id="toggle" style="position:absolute; top: 120px;">Toggle</button>
随时随地看视频慕课网APP
我要回答