当前阅读教程:Vue.JS入门教程 > CSS 动画 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 过渡 | 下一篇: 自定义过渡的类名 |
CSS 动画用法类似 CSS 过渡,但是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除,而是在 animationend 事件触发时删除。 示例代码<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue.js css动画</title> <!--加载本地vue.js的框架--> <script src="vue2.2.2.min.js"></script> <style> .donghua-enter-active { animation:donghua01 3s;} .donghua-leave-active { animation:donghua01 3s reverse;} @keyframes donghua01{ 0%{ transform:scale(0.5);} 50% { transform:scale(1);} 100% { transform:scale(1.5);} } </style> </head> <body> <!--定义div区块的id的值,这里定义的值为"app",后面vue会使用该值--> <div id="app"> <!--每次点击show的值在true和false之间切换--> <button v-on:click="show=!show">点我</button> <!--Vue 提供了内置的过渡封装组件,该组件用于包裹要实现过渡效果的组件--> <transition name="donghua"> <!--要实现过渡效果的组件--> <p v-if="show">欢迎大家学习vue教程</p> </transition> </div> <script> new Vue({ el:"#app", data:{ show:true } }) </script> </body> </html> 效果图 |
|
上一篇: 过渡 | 下一篇: 自定义过渡的类名 |