详解vue过度效果与动画transition使用示例
作者:guoyp2126 发布时间:2023-07-02 16:45:03
先看一个示例
代码如下
<template>
<div align="center" style="margin-top: 100px;">
<button @click="show= !show" >测试</button>
<transition>
<div v-if="show">
<p>这是一段文字</p>
</div>
</transition>
</div>
</template>
<script>
export default {
name: 'transitionTest',
data () {
return {
show: true
}
}
}
</script>
<style scoped>
.v-enter-active, .v-leave-active {
transition: all .5s ;
}
.v-enter {
transform: translateY(50px);
opacity: 0;
}
.v-leave-active {
transform: translateY(50px);
opacity: .5;
}
</style>
包裹了一个div组件,点击按钮实现动画效果。一般搭配v-if、v-show、动态组件、组件根节点来使用。
transition钩子函数
transition提供六个钩子函数,提供给我们在不同时机编写相应的动画效果。以下是此六个钩子函数执行时机
1.v-enter:进入过渡开始状态。在元素 * 入之前生效,在元素 * 入之后的下一帧移除。
2.v-enter-active:进入过渡生效时的状态。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
3.v-enter-to:进入过渡的结束状态。在元素 * 入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
4.v-leave: 离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
5.v-leave-active:离开过渡生效时的状态。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
6.v-leave-to:离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除
自定义过渡类名
在页面中有多个地方需要进行过渡效果,如果使用vue提供的默认那6个钩子函数,那么所有要过渡地方的过渡效果都是一样的。如果需要在不同的场合定义不同的动画效果,就需要我们自己定义专属于各个过渡效果的类名。解决办法给transition标签添加name属性,在name属性中写入自己的类名前缀。例如,那么在使用类名的时候就是这样的:.my-trans-leave、.my-trans-enter-to。如:
<transition name="my-trans" mode="out-in">
<router-view v-if="!$route.meta.keepAlive"></router-view>
</transition>
style写法,my-trans是“.my-trans-enter-active”的前缀
<style>
.my-trans-enter-active,
.my-trans-leave-active {
transition: all .2s;
opacity: 1;
}
.my-trans-enter {
transition: all .2s;
opacity: 0;
}
.my-trans-leave-to {
transition: all .2s;
opacity: 0;
}
</style>
transition-group使用
对列表进行过渡渲染时,就必须使用transition-group元素包裹。点击列表中内容,按照以下动画移除,示例如下
<template>
<div class="main_css">
<transition-group name="slide">
<li v-for="(item,i) in list" :key="item.id" @click="del(i)">
{{ item.id }} --- {{ item.name }}
</li>
</transition-group>
</div>
</template>
<script>
export default {
name: 'transitionGroupTest',
data () {
return {
list: [{
id: 1,
name: '红烧鱼'
},
{
id: 2,
name: '炒土豆'
},
{
id: 3,
name: '烧茄子'
}
]
}
},
methods: {
del (i) {
this.list.splice(i, 1)
}
}
}
</script>
<style scoped>
.main_css {
margin-left: 50px;
margin-top: 50px;
}
.slide-enter-active {
transition: all .5s linear;
}
.slide-leave-active {
transition: all .1s linear;
}
.slide-enter {
transform: translateX(-100%);
opacity: 0;
}
.slide-leave-to {
transform: translateX(110%);
opacity: 0;
}
</style>
小结
过度与动画,使用transition标签完成,同时提供6个钩子函数。全局动画在app.vue中,在router-view组件中包裹transition,如:;给transition标签添加name属性定义过渡类名,实现局部变化。
以上就是详解vue过度与动画transition使用示例的详细内容,更多关于vue过度与动画transition的资料请关注脚本之家其它相关文章!
来源:https://blog.csdn.net/guoyp2126/article/details/119566990
猜你喜欢
- python 3.x 环境下,使用h5py加载HDF5文件,查看keys,如下:>>> import h5py>&g
- 前段时间跟这suggest项目走,没想到这么一个小小的输入框居然会带来那么多的问题。首先来比较一下几个主流的搜索引擎的suggest效果。为
- 前言Tripadvisor是全球领先的旅游网站,主要提供来自全球旅行者的点评和建议,全面覆盖全球的酒店、景点、餐厅、航空公司 ,以及旅行规划
- 一、两种模式pytorch可以给我们提供两种方式来切换训练和评估(推断)的模式,分别是:model.train() 和 model.eval
- 本文实例讲述了kNN算法python实现和简单数字识别的方法。分享给大家供大家参考。具体如下:kNN算法算法优缺点:优点:精度高、对异常值不
- 信息安全的核心就是数据库的安全,也就是说数据库加密是信息安全的核心问题。数据库数据的安全问题越来越受到重视,数据库加密技术的应用极大的解决了
- execjs 使用有了selenium+Chrome Headless 加载页面为什么还要用execjs来运行js?selenium+Chr
- 效果图先看一下效果图就当是女友无聊的时候自己抽不出时间的小分身吧!需要用到的库tkinter、time、urllib、requeststki
- 获取数据(四种方式)1. url: 需要正则去匹配 url(r'^index/(num)/$
- ASP中判断字符串中是否包含字母和数字的两个函数function isnaw(str) for
- 1.打开赶集网登录界面,先模拟登录并抓包,获得post请求的request参数2. 我们只需构造出上面的参数传入formdata即可参数分析
- 具体代码如下所示:import osfrom PIL import ImageUNIT_SIZE = 220 # the size of i
- 在使用pycharm开发工具连接mysql数据库时提示错误,信息如下:Server returns invalid timezone. Go
- 在学习return函数时候,还是要知道了解它最主要的函数作用,比如,怎么去实现返回一个值,另外还有就是我们经常会用到的使用return能够进
- 内容摘要:ASP开发人员为了在他们的设计项目中获得更好的性能和可扩展性而不断努力。幸运地是,有许多书籍和站点在这方面提供了很好的建议。但是这
- 很多年以前,面对上古时代遗留的 HTML 发出的腐臭,我捂住鼻子唉声叹气。刚练熟 web 标准的我,恨不得寝其尸食其肉,把一切推翻重来。但经
- 关于建立索引的几个准则:1、合理的建立索引能够加速数据读取效率,不合理的建立索引反而会拖慢数据库的响应速度。2、索引越多,更新数据的速度越慢
- 1、保存整个网络结构信息和模型参数信息:torch.save(model_object, './model.pth')直接加
- 前言学习Python的过程中,我们会遇到Excel的各种问题。下面这篇文章主要给大家介绍了关于python对excel进行数据剔除操作的相关
- split()介绍函数:split()Python中有split()和os.path.split()两个函数,具体作用如下:split():