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

动画效果

注：多个动画可使用 name 属性处理<transition name='test'>,则需使用test-enter-active替换v-enter-active

示例一：

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')

 

 

　　

过度效果

/* 进入的起点 */
.hello-enter {
  /* transform: translateX(-100px); */
  transform: translateX(-100%);
}
/* 进入的终点 */
.hello-enter-to {
  transform: translateX(0);
}

/* 离开的起点 */
.hello-leave {
  /* transform: translateX(-100px); */
  transform: translateX(0);
}
/* 离开的终点 */
.hello-leave-to {
  transform: translateX(-100%);
}


等价于==》
/* 进入的起点 ,离开的终点*/
.hello-enter，hello-leave-to {
  /* transform: translateX(-100px); */
  transform: translateX(-100%);
}
/* 进入的终点,离开的起点 */
.hello-enter-to,
hello-leave {
  transform: translateX(0);
}

示例二：

<template>
  <div>
    <button @click="isShow=!isShow">显示.隐藏</button>
    <transition name="hello"
                appear>
      <h2 v-show="isShow">你好啊 Test2！</h2>
    </transition>
  </div>
</template>

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

<style scoped>
h2 {
  background-color: bisque;
  transition: 2s linear;
}

/* 方式二写法--vue写法
linear --匀速
 */

/* 进入的起点 */
.hello-enter {
  /* transform: translateX(-100px); */
  transform: translateX(-100%);
}
/* 进入的终点 */
.hello-enter-to {
  transform: translateX(0);
}

/* 离开的起点 */
.hello-leave {
  /* transform: translateX(-100px); */
  transform: translateX(0);
}
/* 离开的终点 */
.hello-leave-to {
  transform: translateX(-100%);
}
</style>

简写方法

<template>
  <div>
    <button @click="isShow=!isShow">显示.隐藏</button>
    <transition name="hello"
                appear>
      <h2 v-show="isShow">你好啊 Test2！</h2>
    </transition>
  </div>
</template>

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

<style scoped>
h2 {
  background-color: bisque;
  /* transition: 2s linear; */
}

/* h2 中  transition: 2s linear; 可使用下发代码代替  实现过度效果*/
.hello-enter-active,
.hello-leave-active {
  transition: 2s linear;
}

/* 进入的起点 离开的终点*/
.hello-enter,
.hello-leave-to {
  /* transform: translateX(-100px); */
  transform: translateX(-100%);
}
/* 进入的终点 离开的起点*/
.hello-enter-to,
.hello-leave {
  transform: translateX(0);
}

/* 离开的起点 */
/* .hello-leave {
  transform: translateX(0);
} */
/* 离开的终点 */
/* .hello-leave-to {
  transform: translateX(-100%);
} */
</style>

 

<template>
  <div>
    <button @click="isShow=!isShow">显示.隐藏</button>
    <transition-group name="hello"
                      appear>
      <h2 v-show="isShow"
          key="1">key1 你好啊 Test3！</h2>
      <h2 v-show="isShow"
          key="2">key2 你好啊 Test3！</h2>
    </transition-group>
  </div>
</template>

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

<style scoped>
h2 {
  background-color: bisque;
  transition: 2s linear;
}

/* 方式二写法--vue写法
linear --匀速
 */

/* 进入的起点 */
.hello-enter {
  /* transform: translateX(-100px); */
  transform: translateX(-100%);
}
/* 进入的终点 */
.hello-enter-to {
  transform: translateX(0);
}

/* 离开的起点 */
.hello-leave {
  /* transform: translateX(-100px); */
  transform: translateX(0);
}
/* 离开的终点 */
.hello-leave-to {
  transform: translateX(-100%);
}
</style>

注：可借助第三方封装好的插件库完成效果，如下示例

animate.css（animate.style）可实现动画效果的插件库

使用操作步骤(可查看官方文档)：https://animate.style/#documentation

npm install animate.css --save
import 'animate.css';

<h1 class="animate__animated animate__bounce">An animated element</h1>

示例三：

<template>
  <div>
    <button @click="isShow=!isShow">显示.隐藏</button>
    <transition-group appear
                      name="animate__animated animate__bounce"
                      enter-active-class="animate__swing"
                      leave-active-class="animate__backOutUp">
      <h2 v-show="isShow"
          key="1">key1 你好啊 Test4！</h2>
      <h2 v-show="isShow"
          key="2">key2 你好啊 Test4！</h2>
    </transition-group>
  </div>
</template>

<script>
import 'animate.css';

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

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

总结：Vue封装的过度于动画

1. 作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名。
2. 图示

   • 

3. 写法
   • 准备好样式
     • 元素进入的样式
       • v-enter:进入的起点
       • v-enter-active:进入过程中
       • v-enter-to：进入的终点
     • 元素离开的样式
       • v-leave:离开的起点
       • v-leave-active:离开过程中
       • v-leave-to:离开的终点
   • 使用<transition>包裹要过度的元素，并配置name属性。eg：
     • <transition name="hello"

                       appear>

             <h2 v-show="isShow">你好啊 Test2！</h2>

           </transition>
   • 若多个元素需要过度，则需要使用<transition-group>,且每个元素需要指定key值，如下所示：
     • <transition-group name="hello"

                             appear>

             <h2 v-show="isShow"

                 key="1">key1 你好啊 Test3！</h2>

             <h2 v-show="isShow"

                 key="2">key2 你好啊 Test3！</h2>

           </transition-group>