yanlee26/reactivity in depth.html

## reactivity in depth.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../../vue.js"></script>
    <style>
        .fade-enter-active, .fade-leave-active {
            transition: opacity .5s
        }
        .fade-enter, .fade-leave-active {
            opacity: 0
        }
        .slide-fade-enter-active {
            transition: all .3s ease;
        }
        .slide-fade-leave-active {
            transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }
        .slide-fade-enter, .slide-fade-leave-active {
            padding-left: 10px;
            opacity: 0;
        }
    </style>
    <style>
        .bounce-enter-active {
            animation: bounce-in .5s;
        }
        .bounce-leave-active {
            animation: bounce-out .5s;
        }
        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(1);
            }
        }
        @keyframes bounce-out {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.5);
            }
            100% {
                transform: scale(0);
            }
        }
        Toggle show
        Look at me!

    </style>
</head>
<body>
<h3>过渡效果</h3>
<h4>单元素/组件的过渡</h4>
<div id="demo">
    <button v-on:click="show = !show">
        Toggle
    </button>
    <transition name="fade">
        <p v-if="show">hello</p>
    </transition>
</div>
<script>
    new Vue({
        el: '#demo',
        data: {
            show: true
        }
    })
</script>
<h4>CSS过渡</h4>
<div id="example-1">
    <button @click="show = !show">
        Toggle render
    </button>
    <transition name="slide-fade">
        <p v-if="show">hello</p>
    </transition>
</div>
<script>
    new Vue({
        el: '#example-1',
        data: {
            show: true
        }
    })
</script>
<h4>Css动画</h4>
<div id="example-2">
    <button @click="show = !show">Toggle show</button>
    <transition name="bounce">
        <p v-if="show">Look at me!</p>
    </transition>
</div>
<script>
    new Vue({
        el: '#example-2',
        data: {
            show: true
        }
    })
</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<script src="../../vue.js"></script>
	<style>
	.fade-enter-active, .fade-leave-active {
	transition: opacity .5s
	}
	.fade-enter, .fade-leave-active {
	opacity: 0
	}
	.slide-fade-enter-active {
	transition: all .3s ease;
	}
	.slide-fade-leave-active {
	transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
	}
	.slide-fade-enter, .slide-fade-leave-active {
	padding-left: 10px;
	opacity: 0;
	}
	</style>
	<style>
	.bounce-enter-active {
	animation: bounce-in .5s;
	}
	.bounce-leave-active {
	animation: bounce-out .5s;
	}
	@keyframes bounce-in {
	0% {
	transform: scale(0);
	}
	50% {
	transform: scale(1.5);
	}
	100% {
	transform: scale(1);
	}
	}
	@keyframes bounce-out {
	0% {
	transform: scale(1);
	}
	50% {
	transform: scale(1.5);
	}
	100% {
	transform: scale(0);
	}
	}
	Toggle show
	Look at me!

	</style>
	</head>
	<body>
	<h3>过渡效果</h3>
	<h4>单元素/组件的过渡</h4>
	<div id="demo">
	<button v-on:click="show = !show">
	Toggle
	</button>
	<transition name="fade">
	<p v-if="show">hello</p>
	</transition>
	</div>
	<script>
	new Vue({
	el: '#demo',
	data: {
	show: true
	}
	})
	</script>
	<h4>CSS过渡</h4>
	<div id="example-1">
	<button @click="show = !show">
	Toggle render
	</button>
	<transition name="slide-fade">
	<p v-if="show">hello</p>
	</transition>
	</div>
	<script>
	new Vue({
	el: '#example-1',
	data: {
	show: true
	}
	})
	</script>
	<h4>Css动画</h4>
	<div id="example-2">
	<button @click="show = !show">Toggle show</button>
	<transition name="bounce">
	<p v-if="show">Look at me!</p>
	</transition>
	</div>
	<script>
	new Vue({
	el: '#example-2',
	data: {
	show: true
	}
	})
	</script>
	</body>
	</html>