从左侧过渡的CSS 3滑入

177

是否有跨浏览器解决方案仅使用CSS而不使用javascript来产生幻灯片过渡？以下是html内容的示例：

<div>
    <img id="slide" src="http://.../img.jpg />
</div>
css  css-transitions 
— 吉米
source

Answers:

286

您可以使用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; }
}

与上面的原理相同（演示一），但是动画在2秒后自动开始，在这种情况下，我将设置animation-fill-mode为forwards，它将保持结束状态，并在动画结束时保持div可见。

就像我说的，有两个简单的示例向您展示如何实现。

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

动画制作

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_animations

转场

https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_transitions

希望这会有所帮助。

— 克里斯托弗·维兰德
source
174

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

甲常见缺陷是有生命的left/ top/ right/ bottom属性，而不是使用CSS转换达到同样的效果。出于各种原因，变换语义使它们更容易卸载，但left/ top/ right/ bottom更难。

资料来源：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>
展开摘要

— 伴侣64
source
20

这是使用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>
展开摘要

— 斯托廷格
source
2

使用此权利可向左滑动：

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');
  });
});
— Sharavnan Kv
source
0

我喜欢@ 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>
展开摘要

— Codejockie
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.