Vuejs动画十七

最新推荐文章于 2024-10-21 20:30:15 发布

米白蓝

最新推荐文章于 2024-10-21 20:30:15 发布

阅读量150

点赞数

CC 4.0 BY-SA版权

分类专栏： Vuejs 文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_50563868/article/details/124449176

Vuejs 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了如何在Vue中使用`transition`和`v-show/v-if`实现元素的显示/隐藏动画，以及CSS动画关键帧的配置。同时对比了两个Vue组件中不同动画设置的差异，包括`appear`属性和CSS选择器的命名规则。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//Test.vue
<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition name="change" appear>
      <h1 v-show="isShow">你好呀</h1>
    </transition>
  </div>
</template>

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

<style scoped>
h1 {
  background-color: #fa9;
}
.change-enter-active {
  animation: animate 1s;
}
.change-leave-active {
  animation: animate 1s reverse;
}
@keyframes animate{
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateY(0);
  }
}
</style>

//Test2.vue
<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition name="change" appear>
      <h1 v-show="isShow">你好呀</h1>
    </transition>
  </div>
</template>

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

<style scoped>
h1 {
  background-color: #cc7;
}
.change-enter, .change-leave-to {
  transform: translateX(-100%);
}
.change-enter-active, .change-leave-active {
  transition: 1s linear;
}
.change-enter-to, .change-leave {
  transform: translateX(0);
}

</style>

vue找那个动画可以使用transition标签将需要动画的标签包裹起来，如果不写name那么默认起始和结束的样式选择器名为v-enter-active、v-leave-active，如果有name，那么需要将v改为name值；
transition标签中appear属性可以控制一开始就显示动画，不需要自己点击；appear可以不用写=，也可以:appear=“true”；
transition标签浏览器是不认识的，所以在浏览器检查代码中看不到，这个标签是给vue使用的；
过渡实现：vue会给需要动画的元素添加六个样式，起始动画的样式：.name值-enter {},.name值-enter-active{},.name值-enter-to;结束动画的样式：.name值-leave{},.name值-leave-active{},.name值-leave-to，这样就可以不用写@keyfrom就可以控制动画；
transition-group：标签：但是被这个标签包裹的需要过渡的元素需要使用key标记；
animate.css：一个动画库，引入可以直接使用 import ’css文件‘