Vue学习笔记54--动画效果+过度效果

动画效果

示例一：

Test.vue——主要代码文件

<template>
  <div>
    <button @click="isShow=!isShow">显示.隐藏</button>
    <!-- 方式一 class =come  or  go -->
    <!-- <h2 v-show="isShow"
        class="come">你好啊！</h2> -->

    <!-- 方式二 
      transition 可以写name 属性，如果写了则需要使用name属性替代v 
      例如：<transition name='test'>,则需使用test-enter-active替换v-enter-active
      :appear="true" 表示默认启动动画
      注：<transition :appear="true"> 等价于 <transition appear>
    -->
    <!-- <transition :appear="true"> -->
    <transition appear>
      <h2 v-show="isShow">你好啊！</h2>
    </transition>
  </div>
</template>

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

<style scoped>
h2 {
  background-color: bisque;
}

/* 方式二写法--vue写法 */
.v-enter-active {
  /* 匀速 */
  /* animation: autoTest 1s linear; */
  animation: autoTest 2s linear;
}
.v-leave-active {
  animation: autoTest 2s linear reverse;
}

/* 方式一写法 */
.come {
  /* 匀速 */
  /* animation: autoTest 1s linear; */
  animation: autoTest 2s;
}
.go {
  animation: autoTest 2s reverse;
}
@keyframes autoTest {
  from {
    /* transform: translateX(-100px); */
    transform: translateX(100%);
  }
  to {
    transform: translateX(0100px);
  }
}
</style>

App.vue

<template>
  <div class="app">
    <Test></Test>
  </div>
</template>

<script>
// 引入组件
import Test from './components/Test.vue';
export default {
  name: 'App',
  components: { Test },
  data () {
    return {
      // msg: '消息订阅与发布'
    }
  },

}
</script>

<style scoped>
.app {
  background-color: rgb(178, 168, 168);
  padding: 15px;
}
</style>

main.js

// 引入Vue
import Vue from 'vue'
// 引入App
import App from './App.vue'
// 配置提示
Vue.config.productionTip = false

// console.log('Vue.prototype==>', Vue.prototype)
// console.log('VueComponent.prototype.__proto__==>', Vue.prototype)

new Vue({
  render: h => h(App),
}).$mount('#app')