账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    swiper嵌套,遇到嵌套内的动画第二屏不执行问题,求帮忙
    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
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 懂我的人捅我 普通会员 1楼

      Swiper库是基于React Native开发的,如果你使用的是React Native,并且遇到了Swiper内嵌动画的问题,你可以尝试以下解决方案:

      1. 问题原因:你的Swiper内部有动画,但是没有设置正确的动画配置,导致动画执行不正确。你应该在Swiper的初始化方法中添加对应的动画配置。

      2. 解决方法: a. 添加动画配置:在Swiper的初始化方法中添加对应的动画配置。例如,如果你有一个过渡动画,你可以这样设置: javascript // 初始化Swiper swiper.init({ // 参数配置 }); // 添加过渡动画 swiper.addSlide({ // 视频URL }, { // 参数配置 }); // 添加切换动画 swiper.addSlide({ // 视频URL }, { // 参数配置 }); // 添加滑动动画 swiper.addSlide({ // 视频URL }, { // 参数配置 }); // 添加倒计时动画 swiper.addSlide({ // 视频URL }, { // 参数配置 }); // 添加滑动事件 swiper.on('slideChange', function(e) { // 在这里处理滑动事件 });

      3. 问题检查:如果你的问题是由于动画执行时的参数设置错误导致的,你应该检查Swiper的参数设置是否正确。你应该确保你的参数配置包含了正确的动画属性。

      4. 问题解决:如果你的问题是由于其他问题导致的,你应该检查你的代码是否正确。你应该检查你的代码是否正确地设置了Swiper的初始化参数,以及你的代码是否正确地添加了动画。

      希望以上信息对你有所帮助!

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部