vue-随笔-transition

最新推荐文章于 2025-08-14 17:31:00 发布

weixin_30839881

最新推荐文章于 2025-08-14 17:31:00 发布

阅读量83

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/cyany/p/9119453.html

本文介绍如何在Vue 2.x中实现元素过渡动画效果，包括使用transition组件及自定义进入和离开的CSS类。并通过一个点击切换显示文本的例子进行演示。

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

这种形式在vue2.x版本中已经不行了

<!-- /**  
 * @Author: cyany_blue  
 * @Date:   2018-05-31 22:13:27  
 * @Last Modified by:   cyany_blue  
 * @Last Modified time: 2018-05-31 22:32:04  
 */ -->  
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Document</title>
      <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>  
    <style>  
        .expand-transition{
            transition: all 3s;
            font-size: 16px;
        }
        .expand-enter{
            background: #53ff53;
            font-size: 45px;
        }
        .expand-leave{
            background: #f00;
            font-size: 12px;
        }
    </style>  
</head>  
<body>  
   <div id="app">
        <transition name="expand" enter-active-class="expand-enter" leave-active-class="expand-leave">
            <p v-if="az">Lorem ipsum dolor sit amet.</p>
        </transition>
        <button v-on:click="abc">click</button>
   </div>
</body>  
<script>  
   new Vue({
    el:'#app',
    data:{
        az:true
    },
    methods:{
        abc(){
            this.az=!this.az;
        }
    }
   })
</script>  
</html>

```````````````````````````````````````````````一般还是加一个动画库比较好 http://www.bootcdn.cn/animate.css/ <link href="https://cdn.bootcss.com/animate.css/3.5.2/animate.min.css" rel="stylesheet"> 进去的时候的enter-active-class 出来的时候的leave-active-class 记得是加在transition元素上的！！！

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo expedita rem amet inventore, tempore asperiores debitis veniam, nobis quae eaque voluptatibus facere, molestiae, mollitia fugiat ducimus dolorum praesentium qui veritatis quo. Praesentium, ullam. Autem temporibus esse, culpa pariatur, animi voluptates aperiam neque cum fugit architecto labore, amet aliquam, sapiente assumenda!

click

methods:{
abc(){
this.abcd=!this.abcd
}
}
```