zoukankan      html  css  js  c++  java
  • Vue中动画

    Vue中动画

     

     

     

    前言

    过渡类名方式

    默认类名

    自定义类名

    第三方类库方式

    钩子函数

    列表元素添加动画

     

     

     

     

     

    前言

    Vue中的动画可以使用过渡类名(默认/自定义)、第三方类库(如animated.css)来实现,注意如果使用过渡类名或第三方类库没法实现"半场动画",也就是说只能实现有去有回的动画,不能实现有去无回的动画,如果要实现有去无回的动画需要使用钩子函数。

     

     

    过渡类名方式

     

    默认类名

    <style>
            <!-- 过渡类名:是以v开头的,vue默认的方式定义动画 -->
    
            .v-enter-active, .v-leave-active {
                transition: all .8s;
            }
    
            .v-enter, .v-leave-to {
                opacity: 0;
                transform: translateX(150px);
            }
        </style>
        <script src="../lib/vue-2.4.0.js"></script>
    </head>
    <body>
    <div id="app">
        <button @click="show = !show">
            Toggle
        </button>
        <!-- 使用过渡类名时:transition上不需要加任何东西 -->
        <transition>
            <p class="ss" v-if="show">hello</p>
        </transition>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                show: false
            },
            methods: {}
        })
    </script>

    自定义类名

    <style>
            <!--
                除了使用过渡类名外,vue还支持使用自定义类名的方式
                使用自定义类名时需要在transition上加name属性,类
                名以该属性指定的值为开头。
            -->
    
            .fade-enter-active, .fade-leave-active {
                transition: all .8s;
            }
    
            .fade-enter, .fade-leave-to {
                opacity: 0;
                transform: translateX(150px);
            }
        </style>
        <script src="../lib/vue-2.4.0.js"></script>
    </head>
    <body>
    <div id="app">
        <button @click="show = !show">
            Toggle
        </button>
        <transition name="fade">
            <p v-if="show">hello</p>
        </transition>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                show: false
            },
            methods: {}
        })
    </script>

     

    第三方类库方式

     <!--
            vue还支持使用第三方库的方式实现动画。
        -->
        <link rel="stylesheet" href="../lib/animate.css">
        <script src="../lib/vue-2.4.0.js"></script>
    </head>
    <body>
    <div id="app">
        <button @click="show = !show">
            Toggle
        </button>
    
        <!-- 注意除了要加上第三方类库的名称外还要加上animated类名 -->
        <!--<transition-->
                <!--enter-active-class="animated bounceIn"-->
                <!--leave-active-class="animated bounceOut">-->
            <!--<p v-if="show">hello</p>-->
        <!--</transition>-->
    
        <!-- animated在两个上都加太麻烦? -->
        <!--<transition-->
                <!--enter-active-class="bounceIn"-->
                <!--leave-active-class="bounceOut">-->
            <!--<p class="animated" v-if="show">hello</p>-->
        <!--</transition>-->
    
        <!-- 怎么设置动画的时间?:duration="3000"设置动画过渡的时间 -->
        <!--<transition-->
                <!--enter-active-class="bounceIn"-->
                <!--leave-active-class="bounceOut" :duration="3000"> -->
            <!--<p class="animated" v-if="show">hello</p>-->
        <!--</transition>-->
    
        <!-- 怎么分别设置进入和离开的时间 -->
        <transition
                enter-active-class="bounceIn"
                leave-active-class="bounceOut" :duration="{enter:200,leave:800}">
            <p class="animated" v-if="show">hello</p>
        </transition>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                show: false
            },
            methods: {}
        })
    </script>

     

    钩子函数

    不管是过渡类名的动画还是第三方类库的动画都只能是"全场动画"(即有去有回),不能实现有去无回("半场动画")。要实现半场动画需要使用vue提供的钩子函数来实现。

    钩子函数提供了"上半场"动画和"下半场"动画的处理方式,如果你要让动画有去无回,只需要实现上半场动画即可,如果有去有回实现上半场+下半场即可。

     

    案例:上半场动画:

    <style type="text/css">
                    .boll {
                         10px;
                        height: 10px;
                        border-radius: 50%;
                        background-color: #D55656;
                    }
                </style>
                <script src="../lib/vue-2.4.0.js">
                </script>
            </meta>
        </head>
        <body>
            <!--
                使用过渡类或者第三方类库时只能实现全场动画,即有来有回,不能
                实现有来无回的动画,要实现半场动画需要借助vue提供的javascript钩子
                函数。
            -->
            <div id="app">
                <button @click="show = !show">
                    Toggle
                </button>
                <transition 
                @before-enter="beforeEnter"
          @enter="enter"
          @after-enter="afterEnter">
                    <p class="boll" v-if="show"></p>
                </transition>
            </div>
            <script>
                new Vue({
                    el: '#app',
                    data: {
                        show: false
                    },
                    methods: {
                        //  entering...
                        // note: the first param:el of the animate method is expressed: the DOM element who where be execute animate is a native JS DOM object.
                        // you can think it as: el is by ‘document.getElementById('') ’ get the native JS DOM object.
                        beforeEnter(el){
                            // expressed: before the animation starts,you can setting some style in here.
                            el.style.transform = "translate(0,0)";
                        },
                        enter(el, done) {
                            // expressed: animating...,you can setting the element stop status.
                            el.offsetWidth
                            el.style.transform = "translate(100px,400px)";
                            el.style.transition = "all 1s ease";
                            
                            // done函数就相当于afterEnter
                            done();
                        },
                        afterEnter(el) {
                            // expressed: animation stop.
                            this.show = !this.show;
                        }
                    }
                })
            </script>

     

    列表元素添加动画

    注意:一定要是列表元素才行。

    列表元素添加动画需要使用

    transition-group

    包裹。

     

    如下:我换成table元素动画就不起作用。  

     <link href="../../static/bootstrap-3.3.7/css/bootstrap.css" rel="stylesheet" type="text/css"/>
                <script src="../lib/vue-2.4.0.js">
                </script>
                <style type="text/css">
                    /* 先定义好动画类名 */
                    .v-enter,.v-leave-to {
                        opacity: 0;
                        transform: translateY(100px);
                    }
                    .v-enter-active,.v-leave-active {
                        transition: all 0.6s ease;
                    }
                </style>
            </meta>
        </head>
        <body>
            <div id="app">
                <div class="container">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="exampleInputName2">
                                id
                            </label>
                            <input class="form-control" type="text" v-model="id">
                            </input>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputName2">
                                Name
                            </label>
                            <input class="form-control" type="text" v-model="name">
                            </input>
                        </div>
                        <button @click.prevent="add" class="btn btn-default" type="submit">
                            add
                        </button>
                    </form>
    
                    <ul>
                        <!-- 在实现列表元素过渡的时候,如果需要过渡的动画,是通过v-for循环渲染出来的,不能使用transition 包裹,需要使用 transition-group -->
                        <!-- 如果要为 v-for 循环创建的元素设置动画,必须为每一个元素设置:key属性 -->
                        <transition-group>
                            <li :key="item.id" v-for="item in items">
                                {{item.name}}
                            </li>
                        </transition-group>
                        
                    </ul>
    
    
                    <!-- 注意:一定要是列表元素才行! -->
                    <!-- <table>
                        <transition-group>
                            <tr :key="item.id" v-for="item in items">
                                <td>
                                    {{item.name}}
                                </td>
                            </tr>
                        </transition-group>
                    </table> -->
                </div>
            </div>
            <script>
                var vm = new Vue({
                    el: "#app",
                    data: {
                        id:"",
                        name:"",
                        items:[
                            {id:1,name:"毛毛"},
                            {id:2,name:"吉吉"}
                        ]
                    },
                    methods: {
                        add(){
                            this.items.push({id:this.id,name:this.name});
                        }
                    }
                });
            </script>

    前进时,请别遗忘了身后的脚印。
  • 相关阅读:
    开发工具(四)
    开发工具(三)
    调试(二)
    调试(一)
    jsp乱码解决大全(转自csdn一高手)
    开发工具(二)
    开发工具
    在 SQL Server 2000 中对链接服务器运行分布式事务在您安装 Windows Server 2003 或 Windows XP Service Pack 2 时可能收到 7391 错误信息
    蓝桥杯试题
    How to lay pipelines
  • 原文地址:https://www.cnblogs.com/liudaihuablogs/p/13469156.html
Copyright © 2011-2022 走看看