有没有跨浏览器的解决方案,可以仅使用CSS而不是JavaScript来实现幻灯片式过渡效果?以下是HTML内容示例:
<div>
<img id="slide" src="http://.../img.jpg />
</div>
有没有跨浏览器的解决方案,可以仅使用CSS而不是JavaScript来实现幻灯片式过渡效果?以下是HTML内容示例:
<div>
<img id="slide" src="http://.../img.jpg />
</div>
您可以使用CSS3转换或CSS3动画来滑动元素。
有关浏览器支持情况,请参见:http://caniuse.com/
我制作了两个快速示例,只是为了向您展示我的意思。
CSS转换(在悬停时)
相关代码
.wrapper:hover #slide {
transition: 1s;
left: 0;
}
在这种情况下,我只是将位置从left: -100px;
转换为0;
,持续1秒。也可以使用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)原理相同,但动画在2秒后自动开始,在这种情况下,我将 animation-fill-mode
设置为 forwards
,这将保持最终状态,使
就像我说的,这是两个快速的示例,展示了如何完成它。
编辑: 有关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
transform
来避免性能问题(移动设备)一个常见的陷阱是动画化
left
/top
/right
/bottom
属性,而不是使用css-transform 来达到相同的效果。由于多种原因,转换的语义使它们更容易卸载,但left
/top
/right
/bottom
要难得多。
来源:Mozilla Developer Network (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>
这里有另一种解决方案,使用CSS transform(为了在移动设备上提升性能,请参见@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>
我喜欢@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>
使用以下代码实现从右向左滑动:
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>