CSS 3从左侧过渡插入

Question

是否有一个跨浏览器解决方案仅使用CSS而不使用javascript来生成幻灯片过渡？以下是html内容的示例：<div>    <img id="slide" src="http://.../img.jpg /></div>

Answer 1

使用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>