Vuejs动画十七

//Test.vue
<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition name="change" appear>
      <h1 v-show="isShow">你好呀</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Test',
  data() {
    return {
      isShow: true
    }
  }
};
</script>

<style scoped>
h1 {
  background-color: #fa9;
}
.change-enter-active {
  animation: animate 1s;
}
.change-leave-active {
  animation: animate 1s reverse;
}
@keyframes animate{
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateY(0);
  }
}
</style>

//Test2.vue
<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition name="change" appear>
      <h1 v-show="isShow">你好呀</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Test2',
  data() {
    return {
      isShow: true
    }
  }
};
</script>

<style scoped>
h1 {
  background-color: #cc7;
}
.change-enter, .change-leave-to {
  transform: translateX(-100%);
}
.change-enter-active, .change-leave-active {
  transition: 1s linear;
}
.change-enter-to, .change-leave {
  transform: translateX(0);
}

</style>

• vue找那个动画可以使用transition标签将需要动画的标签包裹起来，如果不写name那么默认起始和结束的样式选择器名为v-enter-active、v-leave-active，如果有name，那么需要将v改为name值；
• transition标签中appear属性可以控制一开始就显示动画，不需要自己点击；appear可以不用写=，也可以:appear=“true”；
• transition标签浏览器是不认识的，所以在浏览器检查代码中看不到，这个标签是给vue使用的；
• 过渡实现：vue会给需要动画的元素添加六个样式，起始动画的样式：.name值-enter {},.name值-enter-active{},.name值-enter-to;结束动画的样式：.name值-leave{},.name值-leave-active{},.name值-leave-to，这样就可以不用写@keyfrom就可以控制动画；
• transition-group：标签：但是被这个标签包裹的需要过渡的元素需要使用key标记；
• animate.css：一个动画库，引入可以直接使用 import ’css文件‘