路由切换增添动画

作者: 小丘啦啦啦 | 来源:发表于2019-04-28 15:10 被阅读0次

路由切换增添动画
vue 使用 transition + router + kee
前端系统学习 10. Vue高级用法
Angular框架中路由切换时的动画效果添加（routeAnim
Vue3+TS Day23 - vue-router、路由动画、
react应用的路由切换动画
20-03-26 页面过渡跳转
React 路由切换动画
Vue.js笔记 — 路由之间的切换动画
Flutter Hero动画案例

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 导入vue路由的包 -->
        <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
        <style>
            .myactive{
                color: red;
                text-decoration: none;
            }
            .v-enter,.v-leave-to{
                opacity: 0;
                transform: translateX(140px);
            }
            .v-enter-active,.v-leave-active{
                transition: all 0.5s ease;
            }
        </style>
    </head>
    <body>
        <div id='app'>
            <router-link to="/login">登陆</router-link>
            <router-link to="/register">注册</router-link>
            <transition mode="out-in">   //mode，加过渡模式，先out再in
                <router-view></router-view>
            </transition>
        </div>
        <template id="templ1">
            <h1>登陆组件</h1>
        </template>
        <script>
            var login = {
                template:'#templ1'
            }
            var register={
                template:'<h1>注册组件</h1>'
            }
            var routerObj = new VueRouter({
                linkActiveClass:'myactive',
                routes : [   
                    {
                        path:'/',   //根路径
                        redirect:'/login'   //重定向url地址
                    },{
                        path:'/login',   //路由路径
                        component:login   //此属性值必须是组件的模板对象，不能是组件名称 
                    } ,{
                        path:'/register',
                        component:register
                    }
                ]
            });

            var vm = new Vue({
                el: "#app",
                data: {
                    
                },
                router :routerObj   
            });
        </script>
    </body>
</html>