Vue动画、过渡

最新推荐文章于 2024-07-13 16:31:11 发布

zzang..

最新推荐文章于 2024-07-13 16:31:11 发布

阅读量67

点赞数

分类专栏： VUE

本文链接：https://blog.csdn.net/xxxx_l/article/details/118819125

版权

VUE 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文介绍了如何在Vue中使用过渡效果（appear）和自定义动画，包括`.v-enter-active`和`.v-leave-active`的使用，以及如何在后端开发中通过CSS transition实现元素的进出动画。适合前端开发者了解Vue组件动画技巧。

摘要由CSDN通过智能技术生成

动画:

<template>
  <div>
     <button @click="isdonghua = !isdonghua">显示/隐藏</button>
     <!-- appear 首次运行加载 -->
     <transition appear>
     <h1 v-show="isdonghua">我是动画</h1>
     </transition>
  </div>
</template>

<script>
export default {
    data(){
        return{
            isdonghua:true,
        }
    }
}
</script>

<style scoped lang="less">
h1{
    background-color: aqua;
}
// .v-enter-active 可以修改为.xxx-enter-active  xxx为任意名字 但需要在上面transition标签加上name="xxx"
.v-enter-active{
    animation: dong 0.5s ;
}
.v-leave-active{
    animation: dong 0.5s reverse;
}

//定义动画
@keyframes dong{
    from { 
        transform: translateX(-100%);
    }
    to { 
        transform: translateX(0%);
    }
}
</style>

过渡:

<template>
  <div>
      <button @click="isguo = !isguo">显示/隐藏</button>
    <transition name="guo" appear>
      <h1 v-show="isguo">我是过渡</h1>
    </transition>
  </div>
</template>

<script>
export default {
    data(){
        return{
            isguo:true
        }
    }
}
</script>

<style scoped>
h1{
    background-color: aqua;
    /* transition:0.5s; */
}
/* 可以不在h1 里面写 transition 通过一下方法*/
.guo-enter-active, .guo-leave-active{
    transition:0.5s;
}
/* 进入的起点 */
.guo-enter{
    transform:translateX(-100%)
}
/* 进入的终点 */
.guo-enter-to{
    transform: translateX(0);
}
/* 离开的起点 */
.guo-leave{
    transform:translateX(0)
}
/* 离开的终点 */
.guo-leave-to{
    transform: translateX(-100%);
}


</style>