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>
相关文章
|
1天前
|
JavaScript 前端开发 UED
Vue工具和生态系统: Vue.js和服务器端渲染(SSR)有关系吗?请解释。
Vue.js是一个渐进式JavaScript框架,常用于开发单页面应用,但其首屏加载较慢影响用户体验和SEO。为解决此问题,Vue.js支持服务器端渲染(SSR),在服务器预生成HTML,加快首屏速度。Vue.js的SSR可手动实现或借助如Nuxt.js的第三方库简化流程。Nuxt.js是基于Vue.js的服务器端渲染框架,整合核心库并提供额外功能,帮助构建高效的应用,改善用户体验。
4 0
|
2天前
|
Web App开发 JavaScript 开发者
Vue工具和生态系统:什么是Vue DevTools?如何使用它?
Vue Devtools是Vue.js官方的浏览器扩展,用于简化应用调试和优化。可在Chrome和Firefox等浏览器上安装,集成到开发者工具中。安装步骤包括下载源码、npm安装、修改manifest.json并加载编译后的扩展。启用后,开发者能查看Vue组件树,检查属性,并在允许的情况下编辑data,提升开发效率。
5 0
|
3天前
|
JavaScript 测试技术
vue不同环境打包环境变量处理
vue不同环境打包环境变量处理
13 0
|
3天前
|
JavaScript
Vue Steps步骤组件用法
Vue Steps步骤组件用法
11 0
|
3天前
|
JavaScript
Vue项目使用bpmn预览流程图
Vue项目使用bpmn预览流程图
8 0
|
3天前
|
JavaScript
vue中高精度小数问题(加减乘除方法封装)处理
vue中高精度小数问题(加减乘除方法封装)处理
14 0
|
3天前
|
JavaScript
vue项目使用可选链操作符编译报错问题
vue项目使用可选链操作符编译报错问题
11 0
|
3天前
|
JavaScript
Vue项目启动报错处理
Vue项目启动报错处理
7 1
|
3天前
|
JavaScript
vue项目开发笔记记录(四)
vue项目开发笔记记录
40 0
|
3天前
|
JavaScript 定位技术
vue项目开发笔记记录(二)
vue项目开发笔记记录
43 0