有没有跨浏览器的解决方案，产生一个滑动过渡只有CSS，没有javascript?下面是html内容的示例:
<div>
<img id="slide" src="http://.../img.jpg />
</div>
当前回答
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>
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: translateY(-100%); -webkit-transform: translateY(-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: translateY(0%); } } @-webkit-keyframes slide-in { 100% { -webkit-transform: translateY(0%); } } @keyframes slide-out { 0% { transform: translateY(0%); } 100% { transform: translateY(-100%); } } @-webkit-keyframes slide-out { 0% { -webkit-transform: translateY(0%); } 100% { -webkit-transform: translateY(-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>
其他回答
这里是另一个使用css转换的解决方案(为了在移动设备上的性能目的，请参阅@mate64的回答)，而不必使用动画和关键帧。
我创建了两个版本从两侧滑动。
$('#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: transform .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>
从右向左滑动:
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');
});
});
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>
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: translateY(-100%); -webkit-transform: translateY(-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: translateY(0%); } } @-webkit-keyframes slide-in { 100% { -webkit-transform: translateY(0%); } } @keyframes slide-out { 0% { transform: translateY(0%); } 100% { transform: translateY(-100%); } } @-webkit-keyframes slide-out { 0% { -webkit-transform: translateY(0%); } 100% { -webkit-transform: translateY(-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的答案，所以我将重复使用它，并进行轻微修改，以创建下面的上下滑动动画:
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: translateY(-100%); -webkit-transform: translateY(-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: translateY(0%); } } @-webkit-keyframes slide-in { 100% { -webkit-transform: translateY(0%); } } @keyframes slide-out { 0% { transform: translateY(0%); } 100% { transform: translateY(-100%); } } @-webkit-keyframes slide-out { 0% { -webkit-transform: translateY(0%); } 100% { -webkit-transform: translateY(-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>
使用CSS3 2D转换避免性能问题(移动)
一个常见的陷阱是将左/上/右/下属性动画化，而不是使用css-transform来实现相同的效果。由于各种原因，转换的语义使它们更容易卸载，但是左/上/右/下要困难得多。
来源: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>
