mfaridzia/vue-transisi-final.html

## vue-transisi-final.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> Vue Transisi </title>
    <style>
        * {
            margin: 0; padding: 0;
            font-family: 'Lucida Sans', Verdana, sans-serif;
        }
        .menu {
            background: #2980b9;
            text-align: center;
        }
        .menu ul {
            list-style-type: none;
        }
        .menu ul li {
            padding: 0; margin: 0;
            display: inline-block;
            text-align: center;
        }
        .menu a {
            padding: 15px;
            display: block;
            text-decoration: none;
            color: #fff;
        }
        .menu a:hover {
            background-color: #3498db;
        }
        .box-content {
            width: 50%;
            margin: 0 auto;
        }
        p {
            text-align: justify;
            margin-top: 50px;
            line-height: 25px;
        }

        /*
            untuk style transisi nya
        */
        .fade-enter-active, .fade-leave-active {
            transition-property: opacity;
            transition-duration: .40s;
        }
        .fade-enter-active {
            transition-delay: .40s;
        }
        .fade-enter, .fade-leave-active {
            opacity: 0;
        }
    </style>
</head>

<body>

    <div id="app">
        <nav class="menu">
            <ul>
                <li> <router-link to="/"> HOME </router-link> </li>
                <li> <router-link to="/about"> ABOUT </router-link> </li>
            </ul>
        </nav>

        <transition name="fade">
            <router-view> </router-view>
        </transition>

    </div>

    <script src="unpkg.com/vue"></script>
    <script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
    <script>

        const Home = {
                template: `<div class="box-content"> <p>
                    Ini adalah contoh halaman home,
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                <p> </div>`
        }

        const About = {
            template: `<div class="box-content"> <p>
                Ini adalah contoh halaman about,
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            <p> </div>`
        }

        const routes = [
            { path: '/', component: Home },
            { path: '/about',  component: About }
        ]

        const router = new VueRouter({
            routes
        })

        new Vue({
            el: "#app",
            router
        });
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title> Vue Transisi </title>
	<style>
	* {
	margin: 0; padding: 0;
	font-family: 'Lucida Sans', Verdana, sans-serif;
	}
	.menu {
	background: #2980b9;
	text-align: center;
	}
	.menu ul {
	list-style-type: none;
	}
	.menu ul li {
	padding: 0; margin: 0;
	display: inline-block;
	text-align: center;
	}
	.menu a {
	padding: 15px;
	display: block;
	text-decoration: none;
	color: #fff;
	}
	.menu a:hover {
	background-color: #3498db;
	}
	.box-content {
	width: 50%;
	margin: 0 auto;
	}
	p {
	text-align: justify;
	margin-top: 50px;
	line-height: 25px;
	}

	/*
	untuk style transisi nya
	*/
	.fade-enter-active, .fade-leave-active {
	transition-property: opacity;
	transition-duration: .40s;
	}
	.fade-enter-active {
	transition-delay: .40s;
	}
	.fade-enter, .fade-leave-active {
	opacity: 0;
	}
	</style>
	</head>

	<body>

	<div id="app">
	<nav class="menu">
	<ul>
	<li> <router-link to="/"> HOME </router-link> </li>
	<li> <router-link to="/about"> ABOUT </router-link> </li>
	</ul>
	</nav>

	<transition name="fade">
	<router-view> </router-view>
	</transition>

	</div>

	<script src="unpkg.com/vue"></script>
	<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
	<script>

	const Home = {
	template: `<div class="box-content"> <p>
	Ini adalah contoh halaman home,
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	<p> </div>`
	}

	const About = {
	template: `<div class="box-content"> <p>
	Ini adalah contoh halaman about,
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	<p> </div>`
	}

	const routes = [
	{ path: '/', component: Home },
	{ path: '/about', component: About }
	]

	const router = new VueRouter({
	routes
	})

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