浅谈Vue中的过渡效果 && 动画

最新推荐文章于 2022-09-22 22:55:34 发布

于思杨

最新推荐文章于 2022-09-22 22:55:34 发布

阅读量368

点赞数

文章标签： vue javascript animate

本文链接：https://blog.csdn.net/huhu_nihao/article/details/93786988

版权

浅谈Vue中的过渡效果 && 动画

一、使用形式（4种）

1. 在 CSS 过渡和动画中自动应用 class

一个过渡或是一个动画我们分为两个大阶段：
（1）进入
（2）离开

我们使用Vue提供的 transition 组件时，vue会提供6（2.1.8版及以上移除了v-enter和v-leave，现在只有4个）个类名，8个钩子函数给大家使用

6个过渡的类名：

v-enter
v-enter-active
v-enter-to
v-leave
v-leave-active
v-leave-to

8个钩子函数：

钩子函数：特定的时间（满足某一个条件），就会自动触发的一个方法

<transition
  v-on:before-enter="beforeEnter"
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"

  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
  <!-- ... -->
</transition>

案例：

业务：点击按钮，然后一个p标签显示或隐藏（要有透明度的过渡）

<style>
    .yyb-enter-active, .yyb-leave-active {
   
      transition: opacity 2s;
    }
    .yyb-enter, .yyb-leave-to /* .v-leave-active below version 2.1.8 */ {
   
      opacity: 0;
    }
</style>

<body>
  <div id="app">
    <button @click = "change"> 切换 </button>
    <transition name = "yyb">
      <p v-show = "flag"> 1903 </p>
    </transition>
  </div>
</body>

<script>
  /* 
    业务： 点击按钮，然后一个p标签显示或隐藏（ 要有透明度的过渡  ）

    我们使用Vue提供的 transition 组件时，vue会提供6（4）个类名，8个 钩子函数 给大家使用

    钩子函数： 特定的时间（ 满

最低0.47元/天解锁文章

于思杨

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浅谈Vue中的过渡效果 && 动画

浅谈Vue中的过渡效果 && 动画一、使用形式（4种）1. 在 CSS 过渡和动画中自动应用 class一个过渡或是一个动画我们分为两个大阶段：（1）进入（2）离开我们使用Vue提供的 transition 组件时，vue会提供6（2.1.8版及以上移除了v-enter和v-leave，现在只有4个）个类名，8个钩子函数给大家使用6个过渡的类名：v-e...
复制链接

扫一扫