VUE过渡动画学习

最新推荐文章于 2024-08-15 15:20:23 发布

胡先生的博客

最新推荐文章于 2024-08-15 15:20:23 发布

阅读量169

点赞数

文章标签： vue css html

本文链接：https://blog.csdn.net/weixin_47683287/article/details/109325098

版权

VUE过渡动画

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <script src="vue/vue.js"></script>
        <style>
            #a{
                width: 200px;
                height: 200px;
                background-color: blue;
            }
            /* .istrue-enter{
                opacity: 0;
            }
            .istrue-enter-to{
                opacity: 1;
                width: 500px;
            }
            .istrue-enter-active{
                transition: all 3s;
            }
            .v-leave{
                opacity: 1;
            }
            .v-leave-to{
                opacity: 0;
                width: 500px;
            }
            .v-leave-active{
                transition: all 3s;
            } */
            #b{
                width: 300px;
                height: 300px;
                background-color: chartreuse;
            }

        </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

        <div id="app">
            <button v-on:click = 'toggle'>切换</button>
            <transition name='istrue' appear>
                <div id="a" >

                </div>
            </transition>
            <transition appear 
                        v-bind:css="false"
                        v-on:before-enter="beforeEnter"
                        v-on:enter="enter"
                        v-on:after-enter="afterEnter">
                <div id="b" v-show ='isShow'>

                </div>
            </transition>


        </div>
        <!--vue过渡动画:在组件 <transition> </transition>中
            <transition name='  '>

            </transition>
            过渡样式类名：v-只是默认下，可通过name属性绑定更改，有多个元素需要过渡，为了区分，可添加name属性,name值会替换v 
                         v-enter：定义进入过渡开始状态
                         v-enter-active：定义进入过渡生效状态(transition:过渡对象 完成时间 等)
                         v-enter-to：定义进入过渡结束状态(改变的样式)
                         v-leave：定义离开过渡开始状态
                         v-leave-active：定义离开过渡生效状态(transition:过渡对象 完成时间 等)
                         v-leave-to：定义离开过渡结束状态(改变的样式)
            初始渲染：appear：在开始时，就使用过渡 
            
            通过钩子函数实现过渡(在函数中定义样式)：
                        v-on:before-enter="beforeEnter"
                        v-on:enter="enter"
                        v-on:after-enter="afterEnter"
                        v-on:enter-cancelled="enterCancelled"

                        v-on:before-leave="beforeLeave"
                        v-on:leave="leave"
                        v-on:after-leave="afterLeave"
                        v-on:leave-cancelled="leaveCancelled"

            列表过渡 <transition-group tag = '指定默认放在哪个元素中'> </transition-group>



         -->
        
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    isShow:true,
                },
                methods:{
                    toggle:function(){
                        this.isShow = !this.isShow;
                    },
                    beforeEnter:function(el){
                        el.style.opacity = '0';
                    },
                    enter:function(el,done){
                        el.style.transition = 'all 3s';
                        // 在过渡执行回调函数中，还必须写上el.offsetWidth / el.offsetHight
                        el.offsetWidth;
                        // 过渡执行，必须调用done(),要想一进来就有动画，需要延时调用done()
                        setTimeout(function(){
                            done();
                        },0)

                    },
                    afterEnter:function(el){
                        el.style.opacity = '1';
                        el.style.marginLeft = '500px';
                    }
                }
            })

        </script>
    </body>
</html>

胡先生的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
VUE过渡动画学习

VUE过渡动画<!DOCTYPE html><!--[if IE 8]> <html cla
复制链接

扫一扫