H5W3
当前位置:H5W3 > 其他技术问题 > 正文

vue动画,transition标签的 mode="out-in" 属性不起作用?

vue自带的动画实现了淡入淡出的效果,但是transition属性mode="out-in"不起作用,导致动画消失显示出现了重叠,我希望动画消失和显示之间有一定的事件间隔,问题出在哪儿呢?

              <transition name="fade" mode="out-in">
                  <div class="sider-item item1" v-if="curIdx == 0">
                      animation 1111
                  </div>
              </transition>
              <transition name="fade" mode="out-in">
                <div class="sider-item item2" v-if="curIdx == 1">
                    animation 2222
                </div>
              </transition>

css如下:

    //消失时间持续3s
    .fade-enter-active{
      transition: all 3s;
    }

    //显示时间持续1.5s
    .fade-leave-active{
      transition: all 1.5s;        
    }

    .fade-enter, .fade-leave-active{
        opacity: 0;
    }

改成如下方式也无效:

//transition 添加属性 duration
<transition name="fade" mode="out-in" :duration="{ enter: 1000, leave: 3000 }">
</transition>

//css对应修改为
    .fade-enter-active{
      transition-property: all;
    }

    .fade-leave-active{
      transition-property: all; 
    }

    .fade-enter, .fade-leave-active{
        opacity: 0;
    }

回答:

在显示动画中,加上动画延时,这样就不会出现同步和重叠的情况,
但这样会有一种情况就是初始化的时候会慢,如果想要解决,还可以初始化后给他们加上一个class,
然后.fade-enter-active.xxxx 两个class都有就加上动画延时,transtion-delay,就能解决

回答:

    .fade-enter-active{
      transition: all 1.5s;
      transition-delay: 2s;
    }

    .fade-leave-active{
      transition: all 2.5s;
    }

    .fade-enter, .fade-leave-active{
        opacity: 0;
    }

这样可以了,但是为什么 transition标签属性mode="out-in" 为什么不起作用呢?

回答:

如下写法
<transition name=”fade” mode=”out-in”>

              <div class="sider-item item1" v-if="curIdx == 0" key="key1">
                  animation 1111
              </div>
              <div class="sider-item item2" v-if="curIdx == 1" key="key2">
                animation 2222
            </div>

</transition>
需要key标识,二者不同。
默认判断使用的是 标签名。
有key 优先判断key。

本文地址:H5W3 » vue动画,transition标签的 mode="out-in" 属性不起作用?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址