vue(14)--动画效果，过渡效果

目录

 动画效果

过渡效果

---

动画效果

transition意思是过渡，在vue中可以实现动画效果和过渡效果

• 如果在transition后面加上name="hello"类似的， .v-enter-active .v-leave-active就要改成.hello-enter-active, .hello-leave-active
• 让transition有appear属性相当于:appear="true", 有了appear属性后，在页面打开后transition可以直接执行
• 在vue中已经规定了样式类名，来的时候叫.v-enter-active可以理解为进入时激活，离开的时候叫.v-leave-active,可以理解为离开时激活
• 要用动画时，要用@keyframes
• 简单的写就是from和to，难一点就是写百分比

Test.vue

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

  </div>
</template>

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

<style>
    h1{
        background-color: orange;
    }
    .v-enter-active{
        /* linear 匀速，不加也行 */
        animation: atguigu 0.5s linear;
    }
    /* reserve表示走相反 */
    .v-leave-active{
        animation: atguigu 0.5s linear reverse;
    }
    @keyframes atguigu{
        from{
            /* -100px就是从左边而来， */
            transform:translate(-100%)
        }
        to{
            transform:translate(0%);
        }
    }
</style>

App.vue

<template>
  <div>
    <Test/>
    <Test2/>
  </div>
</template>

<script>
// 引入school组件
import Test from "./componments/Test.vue";
import Test2 from "./componments/Test2.vue";

export default {
  name: "App",
  components: {Test,Test2},
};
</script>

过渡效果

可以把过渡过程放在h1里面， 也可以写在进入离开的激活

第一种方法：

h1{
        background-color: orange;
        
        transition: 0.5s linear;
    }

第二种方法：

.hello-enter-active,.hello-leave-active{
        transition: 0.5s linear;
    }

• 让transition有appear属性相当于:appear="true", 有了appear属性后，在页面打开后transition可以直接执行

Test2.vue

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

  </div>
</template>

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

<style>
    h1{
        background-color: orange;
        
        transition: 0.5s linear;
    }
    /* 进入的起点 */ /* 离开的终点 */
    .hello-enter,.hello-leave-to{
        transform: translateX(-100%);
    }
    .hello-enter-active,.hello-leave-active{
        transition: 0.5s linear;
    }
    /* 进入的终点 */  /* 离开的起点 */
    .hello-enter-to,.hello-leave{
        transform: translateX(0);
    }
    
</style>