Vue 进入/离开动画效果
2017-12-26 09:01
716 查看
1、示例代码
(注:写到vue单文件中了)
<template> <div> <button v-on:click="show = !show"> Toggle </button> <transition name="fade"> <p v-if="show">hello</p> </transition> </div> </template> <script> export default { data: function() { return { show: true } } } </script> <style> .fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-to { opacity: 0 } </style>
2、说明
(1)需要transition 标签包裹。
(2)6个class状态
(3)效果:
总结
以上所述是小编给大家介绍的Vue 进入/离开动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- Vue 进入/离开动画
- 仿拉勾网动画效果-----鼠标进入和离开元素4个方向对应的相关操作(非常炫酷)
- 详解Vue中过度动画效果应用
- [Android]点击按钮进入下一个Activity时显示动画效果
- vue 1.0 结合animate.css定义动画效果
- Vue2路由动画效果实现
- 转载:为什么首次进入界面是SwipeRefreshLayout.setRefreshing(true)没有动画效果
- RecyclerView实现Item滑动加载进入动画效果
- ListView及GridView item以特殊动画效果进入屏幕
- Vue2路由动画效果实现
- Android中的popupwindow从底部进入和退出的动画效果
- vue2.0动画效果transiton使用
- android 组件动画(一)——球的进入效果
- vue-cli 动画效果
- [Vue][V-move]列表进入/离开的平滑过渡,官方教程学习释疑
- Vue-router结合transition实现app前进后退动画切换效果
- vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果
- Android 仿 PPT 进入动画效果合集 推荐
- QT---字幕滚动效果,检测鼠标进入和离开控制字幕滚动
- Acitivity进入退出动画效果的两种实现