Vue学习笔记

alright_xhr

已于 2022-05-23 22:46:10 修改

阅读量64

点赞数

分类专栏：笔记文章标签： css3 vue.js html

于 2022-05-23 21:15:10 首次发布

本文链接：https://blog.csdn.net/m0_50122836/article/details/124935210

版权

笔记专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这篇Vue学习笔记介绍了如何实现元素的过渡动画。通过使用`<transition>`标签配合不同的class，如`v-enter`, `v-leave-to`等，结合CSS动画实现元素的进入和离开效果。示例中展示了从右向左的滑动过渡，并提到如果有多个过渡元素，需要指定key值并使用逗号隔开。

摘要由CSDN通过智能技术生成

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值。