vue的动画

最新推荐文章于 2024-05-03 20:01:01 发布

九霄123

最新推荐文章于 2024-05-03 20:01:01 发布

阅读量253

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/lyxkgc/article/details/127089007

版权

vue 专栏收录该内容

42 篇文章 2 订阅

订阅专栏

vue的过渡组件

为单个元素或组件提供动画过渡效果。
可以理解为动画封装
使用案例如下：
关键点： 1. transition标签 2. 指令 v-if / v-show 3. class名字，自行写入css语句。

<!--
 * author: lyx
 * time: 2022/9/9
 * des: api测试页面
 * mark:
 -->
<template>
  <div class="cont">
    <div @click="show = !show">测试</div>
    <transition name="bounce">
      <div v-show="show">
        动画测试
      </div>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      show:false,
    };
  },
  mounted() {

  },
  methods: {


  },
};
</script>
<style lang="less" scoped>
.bounce-enter-active {
  animation: bounce-in .5s;
}
.bounce-leave-active {
  animation: bounce-in .5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}
</style>