vue transition的理解

最近开发的过程中用到了vue的transition组件,写一下自己的心得体会。

transition的作用

首先我的理解是transition是作为元素切换时的过渡动画,例如在一个div进行v-if,v-show的时候,他的显示与隐藏分别进行怎样的变幻,都可以由transition进行控制。

transition的属性

  1. v-enter:元素显示/插入前的效果,例如:transform: translateX(-200%);
  2. v-active-enter:元素显示/插入的过渡时间和函数,例如:transition: all 0.3s ease;
  3. v-enter-to:元素显示/插入后的效果,例如:transform: translateX(-100%);
  4. v-leave:元素隐藏/移除前的效果,例如:transform: translateX(0);
  5. v-active-leave:元素隐藏/移除的过渡时间和函数,例如:transition: all 0.3s ease;
  6. v-leave-to:元素隐藏/移除后的效果,例如:transform: translateX(100%);

 transition动画的实现是依靠css进行控制的,一般而言v-active-enter和v-active-leave的样式是一样的,因为这两个是定义过渡的状态,例如过渡的曲线、时间。
如果页面有多个transition的话可以通过修改name属性,分别给不同的transition添加变幻样式。

案例:

<template>
    <div class="page">
        <transition name="fade">
            <div v-if="formType==0" class="form-main" key="form1">
                        
            </div>
            <div v-else class="form-main" key="form2">
                        
            </div>
        </transition>
    </div>
</template>
<style>
    .page{
        position: relative;
        width: 100%;
        display: flex;
    }
    .form-main{
        width: 100%;
        flex-shrink: 0;
    }
    .fade-enter-active, .fade-leave-active {
        transition: all 0.3s ease;
    }
    .fade-enter{
        transform: translateX(-200%);
    }
    .fade-enter-to{
        transform: translateX(-100%);
    }
    .fade-leave{
        transform: translateX(0);
    }
    .fade-leave-to{
        transform: translateX(100%);
    }
</style>

 上例的效果如下:

 这里的案例省略了很多代码,但效果是相同的。

由这里我们可以使用transition组件进行页面切换添加动画:

即使用下面的方式进行切换:

<template>
    <div class="page">
        <transition>
            <keep-alive>
                <router-view/>
            </keep-alive>
        </transition>
    </div>
</template>

详细案例请查看:https://blog.csdn.net/qq_41756580/article/details/106275305

注意:

transition内部如果包裹的多个相同tag(标签)的元素时,需要给每个标签添加不同的key用以区别。否则的话动画不会生效。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

专业前端小白

写了这么久文章,1分钱都没收到

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值