从左侧滑入CSS动画

Question

从左侧滑入CSS动画

3

我正在制作一个幻灯片放映，它能正常工作，但是动画效果有问题。向左滑出的动画效果很好，但从左边滑入的动画效果却没有。左边距被设置为0%，但没有动画效果，即使一开始被设置为-100%。

Javascript:

var images = [
    'http://i.imgur.com/ByyUANz.png',
    'http://i.imgur.com/S5FfOOB.png',
    'http://i.imgur.com/EuefPdv.png',
    'http://i.imgur.com/Ucvm4pJ.png',
    'http://i.imgur.com/pK5WBHN.png',
    'http://i.imgur.com/nuOLVpy.png'
]
 
function slideShow(startAt){
    var holder = document.getElementById("currentImage");
    var img = document.createElement("img");
    img.src = images[startAt];
    holder.appendChild(img);
    nextPicture(startAt, img);
}
  
function nextPicture(current, currentElement){
 
    var holder = document.getElementById("currentImage");
    setTimeout(function(){
        currentElement.className = "translateLeft";
        current += 1;
        var img = document.createElement("img");
        img.src = images[current];
        img.style.marginLeft = "-100%";
  
        holder.appendChild(img);
        img.className = "translateIn";
    
        if (current == 5){
            current = -1;
            nextPicture(current, img);
        } else {
            nextPicture(current, img);
        }
    
    }, 5000)
   
}
  
slideShow(0);

CSS：

.translateLeft {    
    transition: 3s;
    margin-left: 100% !important;
}
   
.translateIn {
   
    transition: 3s;
    margin-left: 0% !important;   
}

- Christopher Schrader

有没有可能提供一个 Plunker、Fiddle 或者代码片段？如果我们能够实时查看并调试它，那么修复起来会容易得多... - Alexander Nied

@anied https://jsfiddle.net/smaefwrp/ - Christopher Schrader

那么问题是第一张幻灯片后根本没有出现任何图像吗？因为这就是在 fiddle 中发生的情况... - Alexander Nied

不，如果你向下滚动，你会看到它出现在@anied处。 - Christopher Schrader

你在这里的确切目标是什么？你想要制作类似于这个的东西吗？ - Nahush Farkande

显示剩余5条评论

3个回答

1

这里有一个解决方案适用于您的问题。https://jsfiddle.net/smaefwrp/2/

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        html,
        body,
        img {
            position: absolute;
            top:0;
            left: 0;
            margin: 0;
            padding: 0;
            height: 100%;
            overflow-x: hidden;
        }

        #currentImage {
            height: 100%;
            width: 1920px;
        }
        .translateOrigin {
            transition: none;
            transform: translate3d(-100%, 0, 0) !important;
        }

        .translateLeft {
            transition: transform 3s;
            transform: translate3d(100%, 0, 0) !important;
        }

        .translateIn {
            transition: transform 3s;
            transform: translate3d(0, 0, 0) !important;
        }
    </style>
</head>
<body>
<div id="currentImage">
</div>
<div id="buttons">
</div>
<script type="text/javascript">
    var images = [
        'http://i.imgur.com/ByyUANz.png',
        'http://i.imgur.com/S5FfOOB.png',
        'http://i.imgur.com/EuefPdv.png',
        'http://i.imgur.com/Ucvm4pJ.png',
        'http://i.imgur.com/pK5WBHN.png',
        'http://i.imgur.com/nuOLVpy.png'
    ];
    var imageEle = [];
    var currImage = 0;
    var holder = document.getElementById("currentImage");

    function imagesPreload() {
        for (var i = 0; i < images.length; i++) {
            var img = new Image();
            img.src = images[i];
            img.className = "translateOrigin";
            holder.appendChild(img);
            imageEle.push(img);
        }
    }

    imagesPreload();

    document.onkeydown = function(event){
        if(event.keyCode === 13) {
            nextPicture();
        }
    };

    function slideShow(startAt) {
        var holder = document.getElementById("currentImage");
        imageEle[currImage].className = "translateIn";
        nextPicture();
    }

    function nextPicture() {
        setTimeout(function () {
            var img = imageEle[currImage];
            img.addEventListener("transitionend", transitionEnd, false);
            img.className = "translateLeft";

            if (currImage == 5) {
                currImage = 0;
            } else {
                currImage++;
            }
            imageEle[currImage].className = "translateIn";

            /* Reset the image to original position */
            function transitionEnd() {
                img.className = "translateOrigin";
                img.removeEventListener("transitionend", transitionEnd, false);
                nextPicture();
            }
        }, 5000)
    }
    slideShow(currImage);

</script>
</body>
</html>

- Nandan Jain

谢谢！正是我所需要的。 - Christopher Schrader

0

你可以尝试类似这样的代码：

// HTML
<div id="currentImage">
  <div class="window">
    <div class="image-list">
      <div>
        <img src="http://i.imgur.com/ByyUANz.png" />
      </div>
      <div>
        <img src="http://i.imgur.com/S5FfOOB.png" />
      </div>

      <div>
        <img src="http://i.imgur.com/EuefPdv.png" />
      </div>

      <div>
        <img src="http://i.imgur.com/Ucvm4pJ.png" />
      </div>

      <div>
         <img src="http://i.imgur.com/pK5WBHN.png" />
       </div>

      <div>
        <img src="http://i.imgur.com/nuOLVpy.png" />
      </div>

    </div>
  </div>
</div>

还有CSS

// CSS
img {
  height: 50px;
  width: 50px
}

.window {
  position: absolute;
  height: 50px;
  width: 50px;
  border: 2px solid red;
  overflow: hidden
}
div {
  display: inline-block

}
.image-list {
  list-style-type: none;
  display: inline-block;
  padding-left: 0px;
  margin: 0px;
  width: 350px;
  animation: slidingli 30s ; 
}

@keyframes slidingli {
  0% {
    transform: translateX(0px)
  }

  16% {
    transform: translateX(-50px)
  }

  32% {
    transform: translateX(-100px)
  }

  48% {
    transform: translateX(-150px)
  }

  64% {
    transform: translateX(-200px)
  }

  80% {
    transform: translateX(-250px)
  }

  100% {
    transform: translateX(-300px)
  }
}

请查看this的例子。此外，有很多库可以提供所需功能，例如：http://fotorama.io/customize/autoplay/

- Nahush Farkande

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- xxxmatko · Accepted Answer

为了创建一个漂亮的幻灯片，建议使用CSS的transform属性而不是margin。思路是创建占位元素currentImage，并将其位置设置为relative，然后在其中创建所有图像，并将它们的位置设置为absolute。然后默认情况下，所有图像都被平移出了占位符元素，通过添加/删除类show和hide，可以将它们放置在视图内部和外部，就像这样：

var images = [
  'http://i.imgur.com/ByyUANz.png',
  'http://i.imgur.com/S5FfOOB.png',
  'http://i.imgur.com/EuefPdv.png',
  'http://i.imgur.com/Ucvm4pJ.png',
  'http://i.imgur.com/pK5WBHN.png',
  'http://i.imgur.com/nuOLVpy.png'
];

// Get the holder
var holder = document.getElementById("currentImage");

// Create the images
images.forEach(function(url) {
  var img = document.createElement("img");
  img.src = url;
  holder.appendChild(img);
});

// Image counter
var counter = 0;

// Slide show interval
var slideshow = setInterval(function() {
  // When we reach the end of images we shut down the slide show
  // or you can reset the counter to start over
  if(counter === images.length) {
    clearInterval(slideshow);
    return;
  }
  
  // Get all images
  var nodes = holder.getElementsByTagName("img");
  
  // Hide previous image
  if(nodes[counter - 1]) {
   nodes[counter - 1].className = "hide";
  }
  // Show next image
  nodes[counter].className = "show";
  
  counter++;
}, 2500);

#currentImage {
  background: gray;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

#currentImage img {
  width: 100%;
  position: absolute;
  transform: translateX(-110%);
  -webkit-transition: -webkit-transform 1.0s ease 0s;
  -moz-transition: -moz-transform 1.0s ease 0s;
  -o-transition: -o-transform 1.0s ease 0s;
  transition: transform 1.0s ease 0s;
}

#currentImage img.show {
  transform: translateX(0%);
}

#currentImage img.hide {
  transform: translateX(110%);
}

<div id="currentImage">
</div>