前端进阶篇6-----动画

1.回去看了一下vue的过渡，这一次是真的理解过来了。

2.用动画的话，砸门就使用简单的vue过度+css3就可以了，当然嫌懒得话可以使用animate.css这个动画库，非常好用。

3.既然这样，先开始vue得过渡得纪录

vue得过度是这样的

<transition> 是vue动画得关键

当在这个里面得时候，vue会先去寻找对应得css动画，然后对应得js得动画，找不到会在下一帧进行刷新。

具体的内容：

<template>
  <div id="example-1">
    <button @click="show = !show">
      Toggle render
    </button>
    <transition name="slide-fade">
      <p v-if="show">hello</p>
    </transition>
  </div>
</template>>

<script>
export default {
  data () {
    return {
      show: true
    }
  }
}
</script>>

<style scoped>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all .3s ease;
}
.slide-fade-leave-active {
  transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}
</style>

同时有6个class进行动画的调整：

1.v-enter 定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

2.v-erter-active 定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

3.v-enter-to  定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

4.v-leave定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

5.v-leave-active 定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

6.v-leave-to2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

当然这里就有一个说法：使用<transtion name="className"> 那么css名字就是.className-enter 如果不使用，前缀当然就是v啦

 当然可以使用animate.css了，用起来比较方便，

<transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" >

当同时使用trasition和animate作用于同一元素时，使用type决定使用那一块元素。

<transition :duration="1000">...</transition> 可以定制更明确的时间（毫秒）

同时如何在相应的method中使用动画呢？

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

这样可以指定相应的方法：
 

// ...
methods: {
  // --------
  // 进入中
  // --------

  beforeEnter: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },

  // --------
  // 离开时
  // --------

  beforeLeave: function (el) {
    // ...
  },
  // 当与 CSS 结合使用时
  // 回调函数 done 是可选的
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css="false"，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

<transition appear v-on:before-appear="customBeforeAppearHook" v-on:appear="customAppearHook" v-on:after-appear="customAfterAppearHook" v-on:appear-cancelled="customAppearCancelledHook" > <!-- ... --> </transition>

这个仅仅渲染一次

也就是当前transition元素第一次渲染时的过渡动画，它也提供了两个css动画钩子：
appear：表示是否开启此特性
appear-class：表示元素渲染完毕后应用的css样式，它里面的css样式会参与整个动画的过渡
appear-active-class：也表示元素渲染完毕后应用的css样式，它不参与整个动画的过渡

 多个元素怎么区分

1.使用v-if/v-else  或者在标签中使用key ----------------》  v-bind:key="true" 这个就是使用的方式 key的表现更好

平滑过度模式

<transition name="fade" mode="out-in"> <!-- ... the buttons ... --> </transition>

1.on-in 定义

2.in-out 定义哪一个先 哪一个后

多个组件的过渡

这个使用动态组件就可以了

列表的过渡 使用transition-group

• 不同于 <transition>，它会以一个真实元素呈现：默认为一个 <span>。你也可以通过 tag特性更换为其他元素。
• 过渡模式不可用，因为我们不再相互切换特有的元素。
• 内部元素 总是需要 提供唯一的 key 属性值。
• CSS 过渡的类将会应用在内部的元素中，而不是这个组/容器本身。

<transition-group> 组件还有一个特殊之处。不仅可以进入和离开动画，还可以改变定位。要使用这个新功能只需了解新增的 v-move 特性，它会在元素的改变定位的过程中应用。像之前的类名一样，可以通过 name 属性来自定义前缀，也可以通过 move-class 属性手动设置。

和之前相同 在name的后面加上move就可以定义它的v-move特性，这个可以直接改变到下一帧的位置，并且时平滑移动

这里敲黑板注意：

move可以使用这样用

.flip-list-move { transition: transform 1s; }

move的本质其实不是这样的（只需要在一个inline-block/block块级元素里面设置transition: all 1s; 就可以了）

.list-complete-item { transition: all 1s; display: inline-block; margin-right: 10px; }

需要注意的是使用 FLIP 过渡的元素不能设置为 display: inline 。作为替代方案，可以设置为 display: inline-block 或者放置于 flex 中

原理实际上就是一个flip的vue的动画队列

总结一下：这里面就几点：1.transition的6大过渡（css3/js两种方式）、初始渲染appear过渡、多元素使用key/if区分、transition-group列表渲染（平滑处理）