Vue 学习11——Vue过渡与动画（一）

目录

✎ VUE过渡与动画

◆ 前言

✎ vue过渡效果-单元素过渡

◆ 01 VUE过渡动画简介（Vue transition animation ）

         ① demo

         ② 效果

◆ 02 单元素过渡与动画（Single Component ）

① 前言

② demo @click="show=!show"

③ 效果

✎ VUE多元素过渡

◆ 03 多元素过渡与动画（Several）

① 前言

② demo

③ 效果

④ 总结

✎ VUE元素过渡

◆ 04 Animate Velocity组合

① 前言

② demo

③ 效果

---

✎ VUE过渡与动画

◆ 前言

通过前面的模板指令v-if和v-show等，我们可以轻松的实现元素状态的改变，比如改变元素的显示与隐藏

控制元素状态变化

     

一步一步实现功能，第一步要实现显示和隐藏的效果

✎ vue过渡效果-单元素过渡

◆ 01 VUE过渡动画简介（Vue transition animation ）

过渡与动画基本概念

在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡与动画效果。只要按照VUE的使用规则，就可以轻松地实现效果丰富的过渡与动画效果。

 之前我们已经学会了动态组件，并且会进行组件之间的切换，但是切换的效果是十分僵硬的，使用上VUE的过渡与动画效果就会十分自然了，那么如何实现呢？首先我们先来看单个网页元素实现过渡与动画如何操作。
 先看过渡过程，在VUE中实现过渡过程有4个状态，2个过程，这个状态我们以元素的出现和隐藏为例，比如说，元素的透明度从0变为1的过程等等。

1. 利用transition标记将p标签包裹起来，指明这个区域里面的元素它要添加一个过渡的处理，

2. 会给这个transition指明一个name【会在你定义样式的过程中使用到】

3. v-enter v-enter-to v-leave v-leave-to，v会和transition定义的name进行替换