- 37
- 0
使用swiper做垂直切换,每屏都增加了动画,在其中一屏插入水平切换,并且每屏也都是有动画,现在遇到这么个问题:
垂直切换动画无问题,当切换到水平swiper的时候,水平动画第一屏动画正常显示,横滑切换到第二个画面,动画消失,直接fade出现的。第三屏正常。然后向下切换后在回来,又出现该问题了。
html如下:
<div class="swiper-container swiper-container-h">
<div class="swiper-wrapper">
<section class="swiper-slide">1</section>
<section class="swiper-slide">
<div class="swiper-container swiper-container-v">
<div class="swiper-wrapper">
<section class="swiper-slide"><div class="pro_tit font_hei ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s">动画A</div></section>
<section class="swiper-slide"><div class="pro_tit font_hei ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s">动画B</div></section>
<section class="swiper-slide"><div class="pro_tit font_hei ani" swiper-animate-effect="fadeInDown" swiper-animate-duration="0.3s" swiper-animate-delay="0.3s">动画C</div></section>
</div>
</div>
</section>
<section class="swiper-slide">3</section>
</div>
</div>
js代码如下:
<script type="text/javascript">
var swiperH = new Swiper('.swiper-container-h',{
on:{
init: function(){
swiperAnimateCache(this);
swiperAnimate(this);
},
slideChangeTransitionEnd: function(){
swiperAnimate(this);
}
},
direction:"vertical",
navigation:{
nextEl:'.nextPage',
},
effect : 'fade',
});
var swiperV = new Swiper('.swiper-container-v', {
on:{
init: function(){
swiperAnimateCache(this);
swiperAnimate(this);
},
slideChangeTransitionEnd: function(){
swiperAnimate(this);
}
},
pagination: {
el: '.swiper-pagination-v',
},
effect : 'fade',
});
</script> - 共 0 条
- 全部回答
-
懂我的人捅我 普通会员 1楼
Swiper库是基于React Native开发的,如果你使用的是React Native,并且遇到了Swiper内嵌动画的问题,你可以尝试以下解决方案:
-
问题原因:你的Swiper内部有动画,但是没有设置正确的动画配置,导致动画执行不正确。你应该在Swiper的初始化方法中添加对应的动画配置。
-
解决方法: a. 添加动画配置:在Swiper的初始化方法中添加对应的动画配置。例如,如果你有一个过渡动画,你可以这样设置:
javascript // 初始化Swiper swiper.init({ // 参数配置 }); // 添加过渡动画 swiper.addSlide({ // 视频URL }, { // 参数配置 }); // 添加切换动画 swiper.addSlide({ // 视频URL }, { // 参数配置 }); // 添加滑动动画 swiper.addSlide({ // 视频URL }, { // 参数配置 }); // 添加倒计时动画 swiper.addSlide({ // 视频URL }, { // 参数配置 }); // 添加滑动事件 swiper.on('slideChange', function(e) { // 在这里处理滑动事件 }); -
问题检查:如果你的问题是由于动画执行时的参数设置错误导致的,你应该检查Swiper的参数设置是否正确。你应该确保你的参数配置包含了正确的动画属性。
-
问题解决:如果你的问题是由于其他问题导致的,你应该检查你的代码是否正确。你应该检查你的代码是否正确地设置了Swiper的初始化参数,以及你的代码是否正确地添加了动画。
希望以上信息对你有所帮助!
-
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
