Swiper中文论坛

标题: swiper遇到的一个问题，请大神帮忙给看一下，谢谢了 [打印本页]

作者: 初学者001 时间: 2017-8-10 12:13
标题: swiper遇到的一个问题，请大神帮忙给看一下，谢谢了
今天做了一个关于swiper滑动以及animate动画的小练习，发现一个小问题，就是在对一个img元素使用动画效果时会影响整个页面布局。

不多说没直接上代码：

1.首先上一个正常的页面状态：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../css/animate.min.css" />
<link rel="stylesheet" href="../css/animate.css" />
<style>
/**{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
.swiper-container{
height: 100%;
}
.slide1{
background-color: red;
}
.slide2{
background-color: blue;
}
.slide3{
background-color: green;
}
p{
color: blue;
font-size: 50px;
}*/

html, body{
width: 100%;
height: 100%;
display: hidden;
}
*{
margin: 0;
padding: 0;
}
body{
font-family: "微软雅黑";
}
//第一屏
img{
display: block;
}
.slide1{
background-color: #1b2b43;
text-align: center;
}
.part2img1 img{
width: 74%;
height: 4%;
margin: 6% auto 5%;
}
.part2_img{
width: 89%;
margin: 0 auto;
}
.img3{
width: 89%;
height: 30%;
}
.img4{
width: 90%;
height: 8%;
}
.p1{
color: #ffff66;
font-size: 50px;
margin: 4% 0;
}
.div2, .p4{
color: #ffffff;
font-size: 32px;
margin: 3% 0 4%;
}
.p2{
margin-bottom: 2px;
}
.p3{
margin-top: 2px;
}
.p4{
margin-top: 6px;
}
.div5{
position: relative;
}
.div5 img{
position: absolute;
width: 40px;
height: 40px;
bottom: 50px;
left: 50%;
}
.swiper-container{
width: 100%;
height: 100%;
}
.slide2{
background-color: red;
}
.slide3{
background-color: blue;
}
</style>
</head>
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide slide1">
<div class="part">
<div class="part2img1">
<img src="../img/tit1.png"  class="ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="3s" swiper-animate-delay="0.3s"/>
</div>
<img class="ani part2_img" src="../img/intback.png"  swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s"/>
<p class="ani p1" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s">涨跌都是大机会，两拨利润一手抓</p>
<img class="ani img3" src="../img/chart.jpg"  swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.3s" swiper-animate-delay="0.5s"/>
<div class="ani div2"  swiper-animate-effect="fadeIn" swiper-animate-duration="0.3s" swiper-animate-delay="0.6s">
<p class="p2">如图所示，做空买涨利润均很可观</p>
<p class="p3">配合40倍杠杆，行情机会媲美妖股</p>
</div>
<img class="ani img4" src="../img/btn2.png"  swiper-animate-effect="bounceInLeft" swiper-animate-duration="0.6s" swiper-animate-delay="0.8s"/>
<p class="p4">现货交易认准上市公司</p>
<div class="div5">
<img src="../img/select-time_26.png" />
</div>
</div>
</div>
<div class="swiper-slide slide2">Slide2</div>
<div class="swiper-slide slide3">Slide3</div>
</div>
</div>
<script src="../js/swiper-3.4.2.min.js"></script>
<script src="../js/swiper.animate1.0.2.min.js"></script>
</body>
<script>
var swiper = new Swiper(".swiper-container", {
direction: "vertical",
onInit: function (swiper) {
swiperAnimateCache(swiper); //隐藏动画元素
swiperAnimate(swiper); //初始化完成开始动画
},
onSlideChangeEnd: function(swiper){
swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
    }
});
</script>
</html>

这里我是用了swiper基本的滑块的功能和animate的功能
1.首先使用swiper实现了对三个slide滑动切换的效果，在手机上运行没什么问题，只在小米5和oppoR11上运行了一下，发现没什么问题
2.然后对slide其中的一个页面，做了一些页面的布局，其他两个页面只设置了背景颜色，具体效果见图：

其中还对这个页面中的img 和文字做了一些animate 的一些东华效果，比如在第一张图片img标签上 class加上ani的类，然后加上属性 swiper-animate-effect="fadeInDown" swiper-animate-duration="3s" swiper-animate-delay="0.3s" 就实现了第一个img元素从上而下的一个效果，然后又对剩下的元素做了一些东动画效果，当对img3 第三幅图片进行东华处理时，在属性swiper-animate-effect中填入 fadeInRight 时，那么问题来了，动画效果没问题，就是从右边进入的，但是最终的效果在手机上变成了这样：

在小米5手机和oppo R11上就变成了这样，求大神看看这是为啥，是因为swiper在某些地方还是不兼容导致的吗？
如果我将此img3 的swiper-animate-effect属性的值改为 fadeInLeft 和 fadeInTop和fadeInBpttom 都没事，单单值为fadeInRight 从右边进入的时候就变成了上图的样子。请教好心人，给我讲讲是为什么吗？本人刚开始接触学习swiper,虚心请教各位.

作者: 菜鸟龙小仙 时间: 2017-8-11 14:56
太长了，真的一点都不想看

欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/)