CSS 3从左侧过渡滑入

有没有一个跨浏览器的解决scheme来产生一个只有CSS的幻灯片转换，没有JavaScript？ 下面是一个html内容的例子：

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

Answer 1

您可以使用CSS3转换或者CSS3animation来滑动元素。

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

我举了两个简单的例子来向你展示我的意思。

CSS转换（hover时）

演示一

相关守则

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

在这种情况下，我只是过渡从left: -100px;的位置left: -100px; 到0; 用1s。 持续时间。 也可以使用transform: translate();

CSSanimation

演示二

 #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），但animation会在2秒后自动启动，在这种情况下，我将animation-fill-mode为forwards ，这将持续结束状态，在animation结束时保持div可见。

就像我刚才说的，两个简单的例子来告诉你如何做到这一点。

编辑： 有关CSSanimation和转换的详细信息，请参阅：

animation

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

希望这有助于。

Answer 2

2016

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

一个常见的陷阱是animationleft / top / right / bottom属性，而不是使用CSS转换来达到相同的效果。 由于各种原因，转换的语义使得它们更容易卸载，但是left / top / right / bottom更加困难。

来源： Mozilla开发者networking（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> 

Answer 3

这里是另一个使用css变换的解决scheme（用于手机的性能目的，请参阅@ mate64的答案），而不必使用animation和关键帧。

我创造了两个版本，从任何一方滑入。

 $('#toggle').click(function() { $('.slide-in').toggleClass('show'); }); 

 .slide-in { z-index: 10; /* to position it in front of the other content */ position: absolute; overflow: hidden; /* to prevent scrollbar appearing */ } .slide-in.from-left { left: 0; } .slide-in.from-right { right: 0; } .slide-in-content { padding: 5px 20px; background: #eee; transition: all .5s ease; /* our nice transition */ } .slide-in.from-left .slide-in-content { transform: translateX(-100%); -webkit-transform: translateX(-100%); } .slide-in.from-right .slide-in-content { transform: translateX(100%); -webkit-transform: translateX(100%); } .slide-in.show .slide-in-content { transform: translateX(0); -webkit-transform: translateX(0); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="slide-in from-left"> <div class="slide-in-content"> <ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> </ul> </div> </div> <div class="slide-in from-right"> <div class="slide-in-content"> <ul> <li>One</li> <li>Two</li> <li>Three</li> </ul> </div> </div> <button id="toggle" style="position:absolute; top: 120px;">Toggle</button> 

Answer 4

使用这个权利向左滑动：

HTML：

  <div class="nav "> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">SERVICES</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> 

CSS：

 /*nav*/ .nav{ position: fixed; right:0; top: 70px; width: 250px; height: calc(100vh - 70px); background-color: #333; transform: translateX(100%); transition: transform 0.3s ease-in-out; } .nav-view{ transform: translateX(0); } .nav ul{ margin: 0; padding: 0; } .nav ul li{ margin: 0; padding: 0; list-style-type: none; } .nav ul li a{ color: #fff; display: block; padding: 10px; border-bottom: solid 1px rgba(255,255,255,0.4); text-decoration: none; } 

JS：

  $(document).ready(function(){ $('a#click-a').click(function(){ $('.nav').toggleClass('nav-view'); }); }); 

教程和源文件：[观看本video] [1]

演示： http : //www.themeswild.com/read/slide-navigation-left-to-right