vue（三）：动画

动画： transition 标签 + 样式

1 数据动态

<template>
  <div class="hello">
    <transition name="fade"> <!-- transition 包含的元素里面必须有 vue 变量进行数据切换显示 -->
      <span v-if="show">
          {{msg}}
      </span>
    </transition>
    <button v-on:click="show = !show">切换动画</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      show: false,
      msg: 'Welcome to Your Vue.js App'
    };
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .fade-enter,
  .fade-leave-active {
    opacity: 0;
  }

  .fade-enter-active,
  .fade-leave-active {
    transition: opacity 0.5s;
  }
</style>

2 路由动画

<transition name="fade" mode="out-in">
  <router-view/>
</transition>

样式：
.fade-enter,
.fade-leave-active {
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}