Vue学习笔记

2022/5/23 Vue学习笔记 过度与动画

Vue技术_动画效果

1.作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。 2.图示： [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gEHhfmwD-1653311636688)(C:\Users\不喝冰啤酒\Desktop\过度与动画.png)] 3.写法： v-enter 进入的起点v-enter-active 进入过程中v-enter-to 进入的终点v-leave 离开的起点v-leave-active 离开过程中v-leave-to 离开的终点

使用包裹需要过度的元素，并配置name属性；

<transition name="alright">
	<h2 v-show="isShow">哦是吗h2>
transition>

.todo-enter-active{
    animation: ycu 1s linear;
}
.todo-leave-active{
    animation: ycu 1s linear reverse;
}

@keyframes ycu {
    from{
        transform: translateX(100%);
    }
    to{
        transform: translateX(0px);
    }
}

备注：若有多个过度元素，则需要使用：,且每个元素都要指定key值。