当一个标签被transition包裹的时候,vue会自动给我们构建一个动画流程。
>[success] Enter的动画表示[显示]()的动画
Tip:重点关注fade-enter的值
>[warning] Leave的动画表示[消失]()的动画
Tip:重点关注fade-leave-to的值
fade-enter-active,fade-leave-active监听动画的过程
- 1.vue
- 第一章 起步
- 第1节 开发环境配置
- 第2节 hello world
- 第3节 开发todolist
- 1.使用全局组件开发todolist
- 2.使用局部组件
- 第4节 组件的模板写在html中
- 第5节 子组件自定事件,向父组件传递参数
- 第6节 vue-temp
- 第二章 基本
- 第1节实例,挂载点,模板
- 第2节 vue的生命周期
- 2-1 数据改变执行的生命周期函数
- 第3节 v-text/v-html
- 第4节 计算属性,方法,侦听器
- 第5节 计算属性的get,set方法
- 5-1 set
- 第6节 样式绑定
- 第7节 条件渲染
- 第8列表渲染
- 第9节 Vue.set
- 第10节 vue点击事件获取元素的内容
- 第三章 vue组件
- 3-1 使用组件细节
- 3-1-1 组件中的data要是函数
- 3-1-2 ref属性操作DOM
- 3-2 父子组件传值
- 3-2-1 对两个组件的值求和
- 3-3 组件参数校验与非props特性
- 3-4 给组件绑定原生事件@click.native
- 3-5 非父子组件传值
- 3-6 slot
- 3-6-1 使用多个slot
- 3-7 作用域slot
- 3-8 动态组件
- 第四章 动画
- 4-1动画基础
- 4-1-0 动画原理
- 4-1-1 实现一个简单的渐隐渐现动画
- 4-1-2 使用animation实现简单动画
- 4-1-3 自定义v-enter-active,v-leave-active
- 4-1-4 animate.css
- 4-2 vue中使用过渡和动画
- 4-2-1 加载进来就有动画
- 4-2-2 transition和animate.css混用
- 4-3 JS动画与Velocity.js
- 4-3-1 velocity.js
- 4-4 多个元素或组件的过渡
- 4-4-1 组件之间的切换
- 4-5 列表过渡
- 4-6vue中动画的封装
- 4-6-1 使用JS和组件封装一个简单的动画
- 第五章 项目基本配置
- 5-1 vue-cli构造项目的文件介绍
- router.js
- 进行一个简单的路由配置
- App.vue
- 路径
- 5-2 vue-cli中使用vm
- 5-3 样式重置,fastclick,border.css的配置
- 5-4 vue-rem 实现适配
- 第六章 项目开发
- 6-1 在项目中引入iconfont
- 6-2 代码优化
- 6-2-3 设置alias
- 6-3 轮播的开发
- 6-3-1得到一个等比例的div
- 6-3-2 设置swiperList
- 6-3-3 使用swiper控制台报错的解决
- 6-4 图片区域的开发
- 6-4-1 一个简单的算法
- 6-5 使用axios获取首页数据
- 6-5-1 封装一个简单的axios
- 6-5-2 axios跨域
- 第七章 列表页的开发
- 7-1 better-scroll
- 7-2 兄弟组件间联动
- 7-3输入框不能正常输出
- 7-4 项目部署
- 7-5 vuex实现数据共享
- 7-5-1 使用事件向vuex传递数据
- 7-5-2 this.$store.commit
- 7-6 路由
- 7-7 使用localStorage
- 7-8 vuex-state-mutations的切割
- 7-9keep-alive
- 第八章vuex
- 第九章 详情页开发
- 9-1实现动态路由
- 9-2 跳转页面接收传递的参数
- 9-3 全局事件的解绑
- 9-4 递归组件
- 9-5 exclude
- 9-6 解决多个页面相互滚动影响
- 9-7 异步组件
- 9-8 动画插槽
- 2.vue-cube
- 第一章 配置
- 1-1 本地mock数据
- 1-2 路径配置
- 第二章 模块
- 2-1 create-api
- 3.vant-ui
- 第一章 起步
- 第一节 安装
- 第二节 List踩坑记
- 4.weex
- 第一章 开发环境搭建
- 第一节 weex-ui
- 第二节 jdk,sdk配置
- 第二章 内置组件
- 第一节 基础组件
- 第二节 weex的跳转
- 第一节 如何兼容三端
- 5.mpvue
- 第一章 开发环境配置
- 6.问题解决