Vue过渡(动画)- transition组件
2017-07-16 22:20
661 查看
Vue过度(动画),本质走的是CSS3:transtion,animation。
控制器div显示/隐藏,代码如下:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
我们已经实现了对div的显示/隐藏,但是没有过渡(动画)效果。
1.单元素/组件的过渡
Vue提供了
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点
改造:
2
3
4
5
6
1
2
3
4
5
6
2
3
4
5
6
1
2
3
4
5
6
其他更多过渡动画方法,请看文档:http://cn.vuejs.org/v2/guide/transitions.html
控制器div显示/隐藏,代码如下:
<div id="box"> <input type="button" value="按钮" @click="toggle"> <div id="div1" v-show="isShow"></div> </div> <script type="text/javascript"> var vm = new Vue({ el:'#box', data:{ isShow:false }, methods:{ toggle(){ this.isShow = !this.isShow; } } }); </script>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
我们已经实现了对div的显示/隐藏,但是没有过渡(动画)效果。
1.单元素/组件的过渡
Vue提供了
transition的封装组件,在下列情况中,可以给任何元素和组件添加”进入”和”离开”过渡动画。
条件渲染 (使用 v-if)
条件展示 (使用 v-show)
动态组件
组件根节点
改造:
<div id="box"> <input type="button" value="按钮" @click="toggle"> <transition name="fade"> <div id="div1" v-show="isShow" transiton="fade"></div> </transition> </div>1
2
3
4
5
6
1
2
3
4
5
6
.fade-enter-active, .fade-leave-active { transition: opacity .5s } .fade-enter, .fade-leave-active { opacity: 0 }1
2
3
4
5
6
1
2
3
4
5
6
其他更多过渡动画方法,请看文档:http://cn.vuejs.org/v2/guide/transitions.html
相关文章推荐
- Vue 过渡(动画)transition组件案例详解
- vue2.0 transition组件实现过渡效果
- vue组件切换时使用过渡(transition)时应该注意的一些事项
- 学习前端js核心Vue 之 directives(自定义命令) transition (过渡动画 js) 个人备忘笔记
- Vue2.0过渡动画效果transition
- 前端框架Vue(14)—— 利用 vue 过渡效果(transition)+定时器 实现轮播图通用组件
- (六)vue开发 - transition之页面切换过渡动画
- Vue之过渡动画
- android 5.x—过渡动画Transition
- vue学习第9天,过渡 动画
- (七)vue开发 - transition之弹窗动画
- 【CSS3】transition过渡和animation动画
- vue 组件按需引用,vue-router懒加载,vue打包优化,加载动画
- Android 过渡(Transition)动画解析之基础篇
- 从零开始前端学习[33]:Cs3中的transition过渡-animation动画
- CSS的过渡效果及动画效果:transition&animation
- 用css3的transition实现过渡动画
- react过渡动画效果的实现,react-transition-group
- Vue-router结合transition实现app前进后退动画切换效果
- 移动开发过程中, 动画是必不可少的,有了动画,仿佛我们的程序有了生命一样.动画可以让我们的程序界面变化更流畅, 而不是很突兀的感觉.今天,就说一下CATransition过渡动画.