请问如何正确的设置不同的出入动画？

nodejs · 发表于 2016-12-2 08:40:50

本帖最后由 nodejs 于 2016-12-2 14:46 编辑

first：如题

然后HTML代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/swiper-3.4.0.min.css" />
<link rel="stylesheet" type="text/css" href="../css/animate.min.css" />
<style type="text/css">
.swiper-container {
width: 800px;
height: 450px;
}
.swiper-slide {
background-size: cover;
}
.swiper-slide .ani {
font-size: 20px;
color: white;
text-shadow: 0 0 10px gray;
background-color: rgba(255,255,255,0.5);
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="ani" data-slide-in="at 500 from flash use swing during 500" data-slide-out="at 0 to pulse use swing during 1500 force">内容1</div>
</div>
<div class="swiper-slide">
<div class="ani" data-slide-in="at 500 from flash use swing during 500" data-slide-out="at 0 to pulse use swing during 1500 force">内容1</div>
</div>
<div class="swiper-slide">
<div class="ani" data-slide-in="at 500 from flash use swing during 500" data-slide-out="at 0 to pulse use swing during 1500 force">内容1</div>
</div>
<div class="swiper-slide">
<div class="ani" data-slide-in="at 500 from flash use swing during 500" data-slide-out="at 0 to pulse use swing during 1500 force">内容1</div>
</div>
</div>
</div>
<script src="../js/swiper-3.4.0.min.js" type="text/javascript" charset="utf-8"></script>
<script src="../js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

复制代码

JS代码如下：

<script>
var imgs = document.querySelectorAll(".swiper-slide");
for(var i = 0, l = imgs.length; i < l; i++) {
imgs[i].style.backgroundImage = "url(../img/" + (i + 1) + ".jpg)";
}
var mySwiper = new Swiper('.swiper-container', {
onInit: function(swiper) { //Swiper2.x的初始化是onFirstInit
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper) {
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
}
})
</script>

复制代码

PS：此方法在swiper-slide内的元素加data-slide-in(out)也是百度来的，然后想test一下，发现并没有任何作用。
Q:是否此方法是错误/过时的？如果不是，请问正确方法是什么？如果是不对的方法，请问现在的方法是什么？
非常感谢你的回答！
2016-12-02 14:43:42
已经找到了原因是没有引入坛主的swiper.animate-twice.min.js，
那么新的问题来了：data-slide-out 加上了“force”仍然是入场动画结束之后运行，而不是切换下一个slide才运行？

nodejs · 发表于 2016-12-2 08:41:19

二楼

，hahahahhahhhh