vue的动画与过渡

dec_taipeiz

已于 2022-07-16 10:46:18 修改

阅读量454

点赞数

文章标签： javascript vue.js 动画

于 2022-07-16 00:47:22 首次发布

本文链接：https://blog.csdn.net/qq_44306615/article/details/125814270

版权

本文介绍了在Vue中如何实现动画和过渡效果。通过添加动画效果类和使用`transition`标签，可以创建显示和消失的动画。详细讲解了`.hello-enter`、`.hello-enter-to`、`.hello-enter-active`、`.hello-leave`、`.hello-leave-to`和`.hello-leave-active`等过渡类的用途，并提供了示例代码。

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

vue的动画与过渡效果

1：vue的动画
我们想实现以下的一个动画效果：

view

我们先写一个：

<h1 v-show="initshow">你好啊</h1>
<button @click="initshow = !initshow">点击切换</button>

export default {
    data() {
      return {
        initshow:true
      }
    },

就可以得到显示/消失的一个效果
但要做到动画
我们还需要写一个动画效果：

<style lang="less" scoped>
// 进入时的动画
.hello-enter-active{
  animation: donghua 1s;
}
// 离开时的动画
.hello-leave-active{
  animation: donghua 1s reverse;
}
//动画 动画名叫'donghua'
@keyframes donghua{
  from{
       transform:translateX(-100%);
  }
  to{
       transform:translateX(0px);
  }
}
</style>

然后再用transition标签把要做动画的元素包裹起来就可以了：

<transition name="hello" appear>
<h1 v-show="initshow" class=".hello-enter-active">你好啊</h1>
</transition>

注：hello为transition的名字（name）如果transition标签设置了名字则要用名字-enter/leave-active来表示
注：动画名’donghua’可以随便取名但要与class中一致
注：appear为默认反转也就是 ‘你好啊’ 初始状态为从屏幕外出现在屏幕内

2：vue的过渡

1：.hello-enter 进入的起点
2：.hello-enter-to 进入的终点
3：.hello-enter-active 进入的过程
分隔
4：.hello-leave 离开的起点
5：.hello-leave-to 离开的终点
6：.hello-leave-active 离开的过程

我们先写过渡的动画：

// 进入的起点，离开的重点
.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);
}

上面的不动：

<button @click="initshow = !initshow">点击切换</button>
<transition name="hello" appear>
<h1 v-show="initshow">你好啊</h1>
</transition>

 export default {
    data() {
      return {
        name:'zyq',
        age:21,
        zujian1name:"",
        zujian1age:"",
        initshow:true
      }
    },