(尚014)Vue过渡与动画
2023-09-11 14:14:08 时间
操作元素时有个过渡或动画的效果(渐变和移动的效果和放大缩小的效果)
过渡:trasition
动画:animation
1.vue动画的理解
1)操作css的trasition或animation(它本身不是传动画)
2)vue会给目标添加/移除特定的class
3)过渡相关的类名
xxx-enter-active:制定显示的transition
xxx-leave-acttive:指定隐藏的transition
xxx-enter/xxx-leave-to:指定隐藏式的样式
1.test014(1).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*显示/隐藏时的过渡效果*/
.xxx-enter-active,.xxx-leave-active{
transition: opacity 1s;
}
/*隐藏时的样式*/
.xxx-enter,.xxx-leave-to{
opacity: 0;
}
/*显示时的过渡效果*/
/*改变多个时写all,然后再指定*/
.move-enter-active{
transition: all 1s;
}
/*隐藏时的过渡效果*/
.move-leave-active{
transition: all 3s;
}
/*隐藏时的样式*/
.move-enter,.move-leave-to{
opacity: 0;
/*在水平方向移动,向右边移动,所以是正值20px*/
transform: translateX(20px);
}
</style>
</head>
<body>
<div id="test1">
<button @click="isShow=!isShow">toggle</button>
<transition name="xxx">
<p v-show="isShow">hello</p>
</transition>
</div>
<div id="test2">
<button @click="isShow=!isShow">toggle</button>
<transition name="move">
<p v-show="isShow">hello</p>
</transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#test1',
data(){
return{
isShow:true
}
}
})
new Vue({
el:'#test2',
data(){
return{
isShow:true
}
}
})
</script>
</body>
</html>
2.test014(2).html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*进入过程动画*/
.bounce-enter-active{
animation: bounce-in .5s;
}
/*离开过程动画*/
.bouce-leave-active{
/*reverse反过来*/
animation: bounce-in .5s reverse;
}
/*具体使用哪个animation*/
@keyframes bounce-in {
/*x%为时间;scale(1.5),1.5为放大1.5倍;*/
0%{
transform:scale(0);
}
50%{
transform:scale(1.5);
}
100%{
transform:scale(1);
}
}
</style>
</head>
<body>
<div id="example-2">
<button @click="show=!show">Toggle show</button>
<br>
<transition name="bounce">
<!--display: inline-block不加这个会占一整行,加了就会缩小至当前文字-->
<p v-if="show" style="background: red;display: inline-block">吾乃常山赵子龙也!!!</p>
</transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
new Vue({
el:'#example-2',
data:{
show:true
}
})
</script>
</body>
</html>
3.总结:
基本过渡动画的编码步骤:
1)在目标元素外包裹<transition name="xxx">
2)定义class样式
指定过渡样式transition
指定隐藏时样式:opacity/其他
相关文章
- Vue笔记:安装配置node.js及使用vue-cli创建项目
- Vue_(Router路由)-vue-router路由的基本用法
- vue.js3: 用pdf-lib给pdf文件添加中文字体水印(pdf-lib@1.17.1 / vue@3.2.37)
- vue.js3:多张图片转pdf(jspdf@2.5.1 / vue@3.2.37)
- vue.js 3.2.22:菜单每行依次滑动出现的动画
- vue-cli 本地数据模拟
- vue elementUI表单输入完成后回车触发事件@keyup.enter.native
- 一个典型的Vue应用的App.vue
- standalone vue initialization process - Vue应用的初始化过程
- vue 的 render 函数的用法:new Vue({ render: h => h(App), }).$mount(‘#app‘)
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- 带你掌握Vue过滤器filters及时间戳转换
- Vue深度作用选择器
- 计算机毕设 SSM Vue的校园疫情师生防疫登记备案系统(含源码+论文)
- 在vue页面引入echarts,图表的数据来自数据库 springboot+mybatis+vue+elementui+echarts实现图表的制作
- vue父组件向子组件动态传值的两种方法
- 220:vue+openlayers 加载动画,采用css的@keyframes方式
- Vue(八)vue 脚手架、脚手架创建项目示例
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- Vue学习笔记——vue-router
- Vue学习笔记——Vue组件化编程