CSS 3从左过渡滑入

Question

是否有一个跨浏览器解决方案可以仅使用 CSS 而不使用 javascript 来生成滑入式过渡？以下是 html 内容的示例：

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

原文由 Gimmy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 CSS3 过渡或 CSS3 动画来滑动元素。

浏览器支持： http ://caniuse.com/

我做了两个简单的例子来告诉你我的意思。

CSS 过渡（悬停时）

演示一

相关代码

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}

在这种情况下，我只是将位置从 left: -100px; 转换为 0; 用 1s。期间。也可以使用 transform: translate(); 移动元素

CSS动画

演示二

#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

原理同上（Demo One），但是动画在2s后自动开始，在这种情况下，我设置了 animation-fill-mode 为 forwards ，它将保持结束状态，保持动画结束时可见的 div。

就像我说的，两个简单的例子向您展示如何做到这一点。

编辑： 有关 CSS 动画和过渡的详细信息，请参阅：

动画

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

过渡

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

原文由 Christofer Vilander 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

使用 CSS3 2D transform 避免性能问题（移动）

A common pitfall is to animate left / top / right / bottom properties instead of using css-transform to achieve the same effect. For a variety of reasons, the semantics of transforms make them easier to offload, but left / top / right / bottom are much更加困难。

资料来源： 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>

原文由 mate64 发布，翻译遵循 CC BY-SA 4.0 许可协议