进入、离开过渡动画

最新推荐文章于 2024-05-30 21:34:10 发布

scwMason

最新推荐文章于 2024-05-30 21:34:10 发布

阅读量760

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/scwMason/article/details/86035798

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

可以看API：

https://cn.vuejs.org/v2/guide/transitions.html#ad

简单实现一个按钮控制出现和消失的动画

<style>
     .demo-enter,
     .demo-leave-to{
         opacity: 0;
         transform: translateX(150px);
     }
     .demo-enter-active,
     .demo-leave-active{
         transition: all 0.4s ease;
     }
    </style>


<body>
    <div id="app">
        <input type="button" value="toggle" @click="show=!show">
        <transition name="demo">
            <h3 v-if="show">你好</h3>
        </transition>
    </div>
    <script>
        var Vue=new Vue({
            el:"#app",
            data:{
                show:false
            },
            method:{

            }
        })
    </script>
</body>

我们还可以调用第三方的animate.css库来实现动画，这里是直接在transition上用属性：

https://daneden.github.io/animate.css/

 <div id="app">
        <input type="button" value="toggle" @click="show=!show">
        <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="{enter:400,leave:800}">
            <h3 v-if="show">你好</h3>
        </transition>
    </div>

:duration="{enter,leave}"里面表示入场的时间和出场的时间时长

还有一种方式就是使用动画周期函数来实现动画：

<div id="app">
        <input type="button" value="toggle" @click="show=!show">
        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter" @enter-cancelled="enterCancelled">
            <div class="ball" v-show="show"></div>
        </transition>
    </div>
    <script>
        var Vue = new Vue({
            el: "#app",
            data: {
                show: false
            },
            methods: {
                beforeEnter: function (el) {
                    el.style.transform = "translate(0,0)";
                },
                enter(el,done) {
                    el.offsetWidth;//只有加了这句话才会显示效果，可以认为这句话会强制刷新
                    el.style.transform = "translate(150px,450px)";
                    el.style.transition = "all 1s ease";
                    done();//马上执行afterEnter函数
                },
                afterEnter(el) {
                    this.show=!this.show;
                },
                enterCancelled(el) { }
            }
        })
    </script>

列表动画

只要将需要变化的组建加载transform-group里面就行

下面是一个简单的列表动画：

 <style>
        .demo3-enter,
        .demo3-leave-to{
           opacity: 0;
           transform: translateY(80px);
       }
       .demo3-enter-active,
       .demo3-leave-active{
           transition: all 0.6s ease;
       }
       /* 下面两个配合使用，实现一列向上飘上来 */
       .demo3-move{
           transition: all 0.5s ease;
       }
       .demo3-leave-active{
           position: absolute;
       }
    </style>

    <body>
        <div id="app">


            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">Panel title</h3>
                </div>
                <div class="panel-body form-inline">
                    Number<input type="text" v-model="number">
                    Name <input type="text" name="" id="" v-model="name">
                    <input type="button" value="添加" class="btn btn-primary" @click="add">
                </div>
            </div>
            <table class="table table-bordered table-hover table-striped">
                <thead>
                    <tr>
                        <th>Number</th>
                        <th>Name</th>
                    </tr>
                </thead>
                <!-- <li v-for="item in list" :key="item.num">
                        {{item.num}}---{{item.name}}
                    </li> -->
                <tbody is="transition-group" name="demo3">
                    <tr v-for="(item,i) in list" :key="item.num" style="width: 100%">
                        <td>{{item.num}}</td>
                        <td>{{item.name}}</td>
                        <td><a href="" @click.prevent="del(i)">删除</a></td>
                    </tr>
                </tbody>
            </table>


        </div>
        <script>
            var Vue = new Vue({
                el: "#app",
                data: {
                    list: [
                        { num: 1, name: "Mason" },
                        { num: 2, name: "Paul" },
                        { num: 3, name: "Lily" }
                    ],
                    number: "",
                    name: ""
                },
                methods: {
                    add: function () {
                        this.list.push({ num: this.number, name: this.name })
                    },
                    del: function (i) {
                        this.list.splice(i, 1);
                    }
                }
            })
        </script>
    </body>

但是这里的表格有点特殊，因为tbody和我们的transition-group有点重复，所以我们只能像上面这样加上is="transition-group"

另外，如果在transition-group上加上一个appear：

<tbody is="transition-group" name="demo3" appear>

那么我们刷新页面的时候就会从下往上漂上来就会更加有动感的入效果

另外，transition标签渲染页面的时候默认是一个span元素，但是W3C标准是一个行级元素不能包括块级元素的，所以我们可以在tag属性里面：

<tbody is="transition-group" name="demo3" appear tag="div">

这样就会渲染成一个div元素了

scwMason

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
进入、离开过渡动画

可以看API：https://cn.vuejs.org/v2/guide/transitions.html#ad 简单实现一个按钮控制出现和消失的动画&lt;style&gt; .demo-enter, .demo-leave-to{ opacity: 0; transform: translateX(150px); ...
复制链接

扫一扫

专栏目录