第四天 | 易学教程

Vue中的动画：

第一种：

先写<transition>元素这个是vue官方提供的，在style里写.v-enter和.v-leave-to，虽然没有类名

但是可以在style样式中写例如：

.v-enter,

.v-leave-to{

opacity: 0;

transform: translateX(100px);

}

.v-enter-active,

.v-leave-active{

transition: all 1s ease;

}；

在transition元素中加个name属性就可以改变v-的前缀，比如<transition name=“my”>上面的v-enter就要改成my-enter

第二种：

使用第三方类：如animate.css网上找到的到，同样的在<transition enter-active-class+“animated +想要的效果”>

enter-active-class=“animated +一样的：duration=“设置时间毫秒值，可以使用入场时长和离场时长使用对象

{enter：200，leave：400}

第三种：动画的钩子函数

实现半场的就只需要入场的例子：小球入场：半场动画

<transition

    <transition> 
@before-enter="beforeEnter"

            @enter="enter"                   

            @after-enter="afterEnter"

        >

            <div class="ball" v-show="flag"></div>

        </transition>

 methods: {  
                beforeEnter(el){
                    //设置起始和末尾位置
                    el.style.transform = "translate(0, 0)";
                    
                },
                enter(el,done){
                    //表示动画开始之后的样式，可以设置
                    el.offsetWidth//不写这个没有动画效果
                    el.style.transform = "translate(150px, 400px)";
                    el.style.transition = "all 1s ease"
                    done();
                },
                afterEnter(el){
                    this.flag = !this.flag;
                }
            },

列表动画：

在实现列表过渡的时候，如果需要过渡元素的的时候，是通过v-for创建出来的饿话

就要用<transition-group>

配合使用可以让后面的元素渐渐的飘上来v-move和active

给就<transition-group>加上appear<transition-group appear>有个入场效果；

如果不指定tag的话就是添加span比如<transition-group appear tag=“ul”>；

vue的组件学习：

 <div id="app">
        <my-com1></my-com1>
    </div>
    
    <script>
        //1.
        var com1 = Vue.extend({
            template:'<h3>123456789</h3>'
        });
        //2.
        Vue.component('myCom1',com1);
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });

第二种：

   <div id="app">
        <my-l></my-l>
    </div>
    <script>
        Vue.component('myL',{
            template:'<div><h3>1321321231</h3><span>lxl<span><div>'
        })
        var vm = new Vue({
            el: '#app',
            data: {},
            methods: {}
        });

第三种：

这个方法可以在外部写有智能的提示比在spript里写更好，更方便；

定义一个私有的组件：competents：{}

组件中的data和methods：

 <div id="app">
        <my1></my1>
    </div>
    <script>
        Vue.component('my1',{
            template:'<h1>123456+++++{{msg}}</h1>',
            data:function(){
                return {
                    msg:'123456'
                }
            }
        })

例子：登入和注册的切换：

多个组件的过渡：

包起来就行了通过mode属性来实现切换模式：

来源：CSDN

作者：qq_42151188

链接：https://blog.csdn.net/qq_42151188/article/details/104795046

标签

transition