css3滑动从左过渡

你可以使用CSS3过渡或者CSS3动画来滑动一个元素。

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

我举了两个例子来说明我的意思。

CSS转换(悬停时)

演示一个

相关代码

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

在本例中，我只是从左开始转换位置:-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; }
}

与上面(演示一)相同的原理，但动画在2秒后自动开始，在这种情况下，我将动画-填充模式设置为转发，这将保持结束状态，在动画结束时保持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

2013-06-08 08:28:52

这里是另一个使用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>

2017-03-18 16:15:20

从右向左滑动:

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');
  });
});

2016-07-22 06:09:01

我喜欢@mate64的答案，所以我将重复使用它，并进行轻微修改，以创建下面的上下滑动动画:

2020-05-11 14:01:11

使用CSS3 2D转换避免性能问题(移动)

一个常见的陷阱是将左/上/右/下属性动画化，而不是使用css-transform来实现相同的效果。由于各种原因，转换的语义使它们更容易卸载，但是左/上/右/下要困难得多。

来源:Mozilla开发者网络(MDN)

演示:

2015-08-04 21:16:44

2022-06-30 06:14:56

css3滑动从左过渡

推荐文章

最新文章

标签