vue学习第10天,过渡 动画
2017-10-28 14:43
288 查看
1,在同时有过渡和动画的时候 不知道那个会先结束 需要设置要监听的了类型
2,一般VUE能够自己计算过渡或者动画的完成时机 也可以由提前设置时机
3,可以在属性中声明 钩子
v-on:before-enter="beforeEnter" 进入中
v-on:enter enter(el,done) 此回掉函数是可选项的设置 与css 结合使用
v-on:after-enter
v-on:before-leave
v-on:leave
v-on:after-leave
v-on:leave-cancelled
4,都可以结合css使用 也可以单独使用 但是如果只有 javascripr 过渡或者动画的话 enter 的回掉函数done leave 的回掉函数 done 都是必须的 否则的话 会立即执行
5,对只有javascript过渡的元素 设置v-bind:css="false" 可以避免过渡中css对效果的影响
6,常用的js动画库 velocity.js 配合钩子实现动画
7,初始渲染的过过渡 appear 用法和 过渡动画一样 也是设置钩子 配合 css 使用
8,多个元素的过渡 对于原生标签可以使用 v-if 和 v-else
9,常见的多标签过渡是一个描述列表和一个当列表的数据没有的时候告诉用户列表元素为空的一个元素
10,当相同的标签的元素切换的时候 要给每一个元素设置一个 key 否则的话 vue 为了提高效率 只会替换元素里面的内容 元素还在
11,虽然组件中的多个元素标签不一定一样 但是给里面的每一个元素也设置 key 是一个更好的实践
2,一般VUE能够自己计算过渡或者动画的完成时机 也可以由提前设置时机
3,可以在属性中声明 钩子
v-on:before-enter="beforeEnter" 进入中
v-on:enter enter(el,done) 此回掉函数是可选项的设置 与css 结合使用
v-on:after-enter
v-on:before-leave
v-on:leave
v-on:after-leave
v-on:leave-cancelled
4,都可以结合css使用 也可以单独使用 但是如果只有 javascripr 过渡或者动画的话 enter 的回掉函数done leave 的回掉函数 done 都是必须的 否则的话 会立即执行
5,对只有javascript过渡的元素 设置v-bind:css="false" 可以避免过渡中css对效果的影响
6,常用的js动画库 velocity.js 配合钩子实现动画
7,初始渲染的过过渡 appear 用法和 过渡动画一样 也是设置钩子 配合 css 使用
8,多个元素的过渡 对于原生标签可以使用 v-if 和 v-else
9,常见的多标签过渡是一个描述列表和一个当列表的数据没有的时候告诉用户列表元素为空的一个元素
10,当相同的标签的元素切换的时候 要给每一个元素设置一个 key 否则的话 vue 为了提高效率 只会替换元素里面的内容 元素还在
11,虽然组件中的多个元素标签不一定一样 但是给里面的每一个元素也设置 key 是一个更好的实践
相关文章推荐
- vue过渡动画效果学习总结
- vue学习第11天,过渡 动画 过渡模式
- Vue.js学习 Item10 – 过渡与动画
- vue学习第9天,过渡 动画
- Vue 过渡(动画)transition组件案例详解
- 从零开始学习前端开发 — 15、CSS3过渡、动画
- Vue2.0过渡动画效果transition
- UIView动画(过渡效果)的学习笔记
- Vue.js学习笔记:过渡效果(含列表过渡)
- Android 5.0学习之Activity过渡动画
- Vue 动画(过渡)
- Vue入门之animate过渡动画效果
- html css学习笔记-过渡,动画
- Vuejs——(7)过渡(动画)
- vue学习第13天,状态过渡
- [原]浅谈vue过渡动画,简单易懂
- [Vue][V-move]列表进入/离开的平滑过渡,官方教程学习释疑
- Vuejs第七篇之Vuejs过渡动画案例全面解析
- Swift学习笔记(1)过渡动画(CATransition和UIViewAnimation)的用法
- vue过渡动画