11 动画transition的使用

最新推荐文章于 2022-06-28 17:19:07 发布

学习总不晚

最新推荐文章于 2022-06-28 17:19:07 发布

阅读量151

点赞数

分类专栏： Vue 文章标签：动画transition的使用

本文链接：https://blog.csdn.net/u013472738/article/details/100184781

版权

Vue 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

划重点

动画的几个周期：
- 开始阶段
  - v-enter:开始动画前（这是一个时间点）
  - v-enter-active:执行动画中…
  - v-enter-to:开始动画执行后（这是一个时间点）
- 离开阶段
  - v-leave:离开动画前（这是一个时间点）
  - v-leave-active:离开动画的过程中…
  - v-leave-to:离开动画之后，离开的终止状态这个时候元素动画已经结束了（这是一个时间点）

蚂蚁上树

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./lib/vue-2.6.10.js"></script>
    <style>
        /* 
      动画的几个周期：
      开始阶段：
      v-enter :开始动画前          （这是一个时间点）
      v-enter-active: 执行动画中...
      v-enter-to:开始动画执行后     （这是一个时间点）

      离开阶段：
      v-leave:离开动画前           （这是一个时间点）
      v-leave-active： 离开动画的过程中... 
      v-leave-to: 离开动画之后，离开的终止状态 这个时候元素动画已经结束了 （这是一个时间点）
       */
        .v-enter,
        .v-leave-to {
            opacity: 0;
            transform: translateX(10rem);
            transform: rotate(7deg);
        }


        /* 
     自定义 v-前缀
     transition标签中的name就是对应的：其前缀
        */
        .my-enter-active,
        .my-leave-active {
         transition: all  2s ease ;
 
        }  
        .my-enter,
        .my-leave-to {
            opacity: 0;
            transform: translateY(199px);
            
       
        }  
    </style>
</head>

<body>
    <div id="app">
        <input type="button" value="toggle" @click="flag=!flag">
        <transition>
            <h3 v-if="flag">这是一个H3</h3>
        </transition>


        <hr>
        <input type="button" value="toggle2" @click="flag2=!flag2">
        <transition name="my">
            <h6 v-if="flag2"> 这是一个H6 </h6>
        </transition>

    </div>
    <script>
        var vm = new Vue({
            el: '#app',

            data: {
                flag: false,
                flag2:false
            },
            methods: {

            }

        }) 
    </script>





</body>

</html>