vue过渡动画

简介: <style> #box{ width:100px; height:100px; background-color: red; } /* 通过class设置动画方式,一共需要6个class */ /* 设置入场动画开始时的样式 */ .
<style>
#box {
width : 100px ;
height : 100px ;
background-color : red ;
}

/* 通过class设置动画方式,一共需要6个class */

/* 设置入场动画开始时的样式 */
.v-enter,.v-leave-to {
opacity : 0 ;
}
/* 设置入场动画过程中的样式 */
.v-enter-active,.v-leave-active {
transition : all 0.7s ;
}
/* 设置入场动画结束后的样式 */
.v-enter-to,.v-leave {
opacity : 1 ;
}
/* 设置元素离场动画开始时的状态 */
/* .v-leave{
opacity: 1;
} */
/* 设置元素离场动画过程中的状态 */
/* .v-leave-active{
transition: all 0.7s;
} */
/* 设置元素离场动画结束时的状态 */
/* .v-leave-to{
opacity: 0;
} */

#b2 {
width : 100px ;
height : 100px ;
background-color : greenyellow ;
}

/* v- 开头的动画样式是为匿名transition标签设置的样式,还可以使用xxx-center为某种transition标签设置动画样式 */
.ani-enter {
height : 0 !important ;
}
.ani-enter-active {
transition : all 0.7s ;
}
.ani-enter-to {
height : 100px ;
}
.ani-leave {
width : 100px ;
}
.ani-leave-active {
transition : all 0.7s ;
}
.ani-leave-to {
width : 0px !important ;
}
< /style>
</head>
<body>
<div id = "app" >
<input type = "checkbox" v-model = "show" >
<!-- v-show和v-if在显示和隐藏之间切换时 是不带动画的,如果需要添加动画,要使用transition标签 -->
<transition>
<!-- v-show和v-if写在transition标签中时,当元素需要隐藏时,不会立刻隐藏,而是执行离场动画,动画结束之后才隐藏。 -->
<div id = "box" v-show = "show" ></div>


</transition>

<!-- 如果在页面中需要执行多个动画,则可以为transition标签设置name属性,在css中单独为这个transition设置动画方式 -->
<transition name = "ani" >
<div id = "b2" v-show = "show" ></div>
</transition>
</div>
<script src = "vue.js" > < /script>
<script>
// 动画的区别
// 简单动画 少帧
new Vue ({
el: "#app" ,
data: {
show: false
}
})
< /script>
</body>
相关文章
|
15小时前
|
JavaScript 前端开发 测试技术
使用 Vue CLI 脚手架生成 Vue 项目
通过 Vue CLI 创建 Vue 项目可以极大地提高开发效率。它不仅提供了一整套标准化的项目结构,还集成了常用的开发工具和配置,使得开发者可以专注于业务逻辑的实现,而不需要花费大量时间在项目配置上。
52 7
使用 Vue CLI 脚手架生成 Vue 项目
|
2天前
|
JavaScript 算法
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
“Error: error:0308010C:digital envelope routines::unsupported”启动vue项目遇到一个错误【已解决
8 1
|
2天前
|
JavaScript
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
error Component name “Login“ should always be multi-word vue/multi-word-component-names【已解决】
6 1
|
2天前
|
JavaScript
vue知识点
vue知识点
10 3
|
3天前
|
JavaScript 前端开发 Java
【vue实战项目】通用管理系统:作业列表
【vue实战项目】通用管理系统:作业列表
16 0
|
3天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
【vue实战项目】通用管理系统:信息列表,信息的编辑和删除
20 2
|
3天前
|
JavaScript API
【vue实战项目】通用管理系统:信息列表,信息录入
【vue实战项目】通用管理系统:信息列表,信息录入
10 3
|
3天前
|
JavaScript 前端开发 API
【vue实战项目】通用管理系统:学生列表
【vue实战项目】通用管理系统:学生列表
13 2
|
3天前
|
缓存 JavaScript
【vue实战项目】通用管理系统:首页
【vue实战项目】通用管理系统:首页
10 2
|
3天前
|
JavaScript 前端开发 数据安全/隐私保护
【vue实战项目】通用管理系统:登录页
【vue实战项目】通用管理系统:登录页
11 2