24_过渡与动画

最新推荐文章于 2025-04-12 15:36:31 发布

原创最新推荐文章于 2025-04-12 15:36:31 发布 · 113 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue 专栏收录该内容

33 篇文章

订阅专栏

24_过渡与动画

动画效果

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition :appear="true">  
        <!-- 让他一出来就出现动画 -->
       <h1 v-show="isShow" >你好啊</h1>
    </transition>
 </div>
</template>

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

};
</script>

<style scoped>
h1 {
  background-color: orange;
}
/* <transition name="hello">
    对应 .hello-enter-active 
*/

.v-enter-active {
    animation: atguigu 1s;
}
.v-leave-active{
    animation: atguigu 1s reverse;
}

@keyframes atguigu {
    from{
        transform: translateX(-100%);
    }
    to{
        transform: translateX(0px)
    }
}

</style>

过渡实现

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition name="hello" :appear="true">  
        <!-- 让他一出来就出现动画 -->
       <h1 v-show="isShow">你好啊</h1>
    </transition>
 </div>
</template>

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

};
</script>

<style scoped>
h1 {
  background-color: orange;
}
/* 进入的起点 ，离开的终点 */
.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(0px);
}


</style>

多个元素过渡

 <transition-group name="hello" :appear="true">  
       <h1 v-show="!isShow" key="1" >你好啊</h1>
        <h1 v-show="isShow" key="2" >你好啊</h1>
    </transition-group>

集成第三方的库

npm install animate.css

代码演示

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition-group name='animate__animated animate__bounce' 
    :appear="true"
    enter-active-class="animate__swing"
    leave-active-class="animate__backOutUp"
    >  
       <h1 v-show="!isShow" key="1" >你好啊</h1>
        <h1 v-show="isShow" key="2" >你好啊111</h1>
    </transition-group>
 </div>
</template>

<script>
import 'animate.css'
export default {
    name: 'Test',
    data() {
        return {
            isShow:true
        };
    },

};
</script>

<style scoped>
h1 {
  background-color: orange;
}



</style>