将CSS3过渡效果添加到jQuery动画脚本

Question

将CSS3过渡效果添加到jQuery动画脚本

3

以下是一个加载图片并以随机顺序飞入屏幕旁边的脚本。您可以在此处找到该脚本：https://jsfiddle.net/38e126f4/。

我现在想为每个图像添加不同的随机CSS3过渡效果，让它们飞入屏幕上。我尝试使用step函数，但没有成功。

step: function(now, fx) {
    var num = Math.floor((Math.random() * 2) + 1);
    switch(num) {
        case(1):
            $(".av_icon_"+index).css("opacity", "0.5");
            break;
        case(2):
            $(".av_icon_"+index).css('-webkit-transform','rotate(0deg) scale(1) skew('+now+'deg) translate(0px)');
            break;
        } 
},

当我添加这个功能时，它会将所有动画置为空值，并使用疯狂的CSS变换效果使所有图像透明。

如何为这些图像添加整洁的过渡效果？

- steeped

$(".av_icon_"+index).css("opacity", "0.5"); 将透明度设置为一半，这不是动画。这就是为什么您看到它们是透明的原因。 - pablito.aven

是的，那是我尝试让某些事情发生的方式。但它会使所有图像都变成透明的，而不仅仅是当num = 1时。我该如何在其中添加动画效果？ - steeped

1个回答

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

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

- Robert McKee · Accepted Answer

你的意思是用 CSS3 完成整个动画？

var av_icons = ["http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png",
  "http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico",
  "http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png",
  "http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png",
  "http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png",
  "http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico",
  "http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png",
  "http://files.softicons.com/download/game-icons/super-mario-icons-by-sandro-pereira/ico/Mushroom%20-%201UP.ico",
  "http://icons.iconarchive.com/icons/yellowicon/game-stars/256/Mario-icon.png",
  "http://img3.wikia.nocookie.net/__cb20111227211832/cjpedia/images/c/c5/503px-Luigiart6.png"
];

function shuffle(array) {
  var currentIndex = array.length,
    temporaryValue, randomIndex;
  while (0 !== currentIndex) {
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }
  return array;
}
shuffle(av_icons);
$.each(av_icons, function(index, value) {
  $(".icon-slider").append("<img src='" + value + "' />");
});

.icon-slider img {
  position: relative;
  animation: load 1s normal forwards ease-in-out;
  top: -1000px;
  left: -500px;
  width: 90px;
  height: 90px;
}
.icon-slider img:nth-child(1) {
  animation-delay: 0s;
}
.icon-slider img:nth-child(2) {
  animation-delay: 0.5s;
}
.icon-slider img:nth-child(3) {
  animation-delay: 1s;
}
.icon-slider img:nth-child(4) {
  animation-delay: 1.5s;
}
.icon-slider img:nth-child(5) {
  animation-delay: 2s;
}
.icon-slider img:nth-child(6) {
  animation-delay: 2.5s;
}
.icon-slider img:nth-child(7) {
  animation-delay: 3s;
}
.icon-slider img:nth-child(8) {
  animation-delay: 3.5s;
}
.icon-slider img:nth-child(9) {
  animation-delay: 4s;
}
.icon-slider img:nth-child(10) {
  animation-delay: 4.5s;
}
@keyframes load {
  80% {
    opacity:0.5;
    transform: scale(0.5);
  }
  90% {
    top: 0;
    left:0;
    transform: rotate(0deg) scale(.8);
    opacity:1;
  }
  100% {
    top: 0;
    left: 0;
    transform: rotate(360deg) scale(1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="page-content icon-slider"></div>