一、实验目的：
掌握Vue提供的transition组件。
掌握animate.css动画库。
二、实验要求：
了解transition组件和animate.css动画库的基本使用
编写程序完成以下实验内容并上交实验报告
三、实验内容：
（一）实验基础
1、transition组件和animate.css动画库
(1) 通过标签以及该标签与其它动画库的搭配使用实现过渡和动画。使用把需要被动画控制的元素包裹起来，标签可结合6 个CSS类（3个进入过渡的类和3个离开过渡的类）实现过渡，animate.css动画库也可结合这6 个CSS类的自定义类名实现动画效果。
2、本次实验主要通过transition组件和animate.css动画库的使用掌握过渡和动画的编写方法。
（二）实验题
1、编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换，并通过transition组件结合animate.css实现切换时的动画效果。
2、实现单击一个按钮后，切换盒子的展开和收起状态。
四、设计思路：
1. 分别用模板设计3个页面:登录、注册、二维码登录，使用变量控制3个模板显示，显示使用transition组件做动画。2．使用transition将div展开和收起
五、实验过程中遇到的问题及解决手段：
使用模板显示页面的时候需要子组件访问父组件传参，尝试使用this.$emit,让父组件监听,发现过于繁琐,直接使用this.$pontentName=‘form_login’;访问父组件的变量进行Template切换。
六、程序源代码：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>.fade-enter-active, .fade-leave-active {transition: opacity .5s ease;}.fade-enter, .fade-leave-to {opacity: 0;}</style><style scoped>.wrapper {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);max-width: 5rem;line-height: 0.35rem;white-space: wrap;padding: 0.25rem;border-radius: 6px;color: #fff;font-size: 0.18rem;background: rgba(0,0,0, 0.8)}.login-page {width: 360px;padding: 8% 0 0;margin: auto;}.form {position: relative;z-index: 1;background: #FFFFFF;max-width: 360px;margin: 0 auto 100px;padding: 45px;text-align: center;box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);}.form input {font-family: "Roboto", sans-serif;outline: 0;background: #f2f2f2;width: 100%;border: 0;margin: 0 0 15px;padding: 15px;box-sizing: border-box;font-size: 14px;}.form button {font-family: "Microsoft YaHei","Roboto", sans-serif;text-transform: uppercase;outline: 0;background: #4CAF50;width: 100%;border: 0;padding: 15px;color: #FFFFFF;font-size: 14px;-webkit-transition: all 0.3 ease;transition: all 0.3 ease;cursor: pointer;}.form button:hover,.form button:active,.form button:focus {background: #43A047;}.form .message {margin: 15px 0 0;color: #b3b3b3;font-size: 12px;}.form .message a {color: #4CAF50;text-decoration: none;}/*.form .register-form {display: none;}*/.container {position: relative;z-index: 1;max-width: 300px;margin: 0 auto;}.container:before, .container:after {content: "";display: block;clear: both;}.container .info {margin: 50px auto;text-align: center;}.container .info h1 {margin: 0 0 15px;padding: 0;font-size: 36px;font-weight: 300;color: #1a1a1a;}.container .info span {color: #4d4d4d;font-size: 12px;}.container .info span a {color: #000000;text-decoration: none;}.container .info span .fa {color: #EF3B3A;}body {background: #76b852; /* fallback for old browsers */background: -webkit-linear-gradient(right, #76b852, #8DC26F);background: -moz-linear-gradient(right, #76b852, #8DC26F);background: -o-linear-gradient(right, #76b852, #8DC26F);background: linear-gradient(to left, #76b852, #8DC26F);font-family: "Roboto", sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}.shake_effect{-webkit-animation-name: shake;animation-name: shake;-webkit-animation-duration: 1s;animation-duration: 1s;}@-webkit-keyframes shake {from, to {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}10%, 30%, 50%, 70%, 90% {-webkit-transform: translate3d(-10px, 0, 0);transform: translate3d(-10px, 0, 0);}20%, 40%, 60%, 80% {-webkit-transform: translate3d(10px, 0, 0);transform: translate3d(10px, 0, 0);}}@keyframes shake {from, to {-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}10%, 30%, 50%, 70%, 90% {-webkit-transform: translate3d(-10px, 0, 0);transform: translate3d(-10px, 0, 0);}20%, 40%, 60%, 80% {-webkit-transform: translate3d(10px, 0, 0);transform: translate3d(10px, 0, 0);}}p.center{color: #fff;font-family: "Microsoft YaHei";}#unshow{z-index: 2;background: #b3b3b3;}</style><script src="vue.js"></script></head><body><!-- 定义登录组件 --><template id="form_login"><form class="login-form"><span>我是登录组件</span><input type="text" placeholder="用户名" id="user_name"/><input type="password" placeholder="密码" id="password"/><button id="login" >登录</button><button class="unshow" id="unshow" @click="switch_code_login()">二维码登录</button><p class="message">没有账户?创建一个 <a href="#" @click="switch_create()">立刻创建</a></p></form></template><!-- 定义注册组件 --><template id="form_register"><form class="register-form"><span>我是注册组件</span><input type="text" placeholder="用户名" id="r_user_name"/><input type="password" placeholder="密码" id="r_password" /><input type="text" placeholder="电子邮件" id="r_email"/><button id="create">创建账户</button><p class="message">已经有了一个账户? <a href="#" @click="switch_login()">立刻登录</a></p></form></template><!-- 二维码登录 --><template id="form_login_code"><form class="register-form"><span>我是二维码登录组件</span><img src="img.jpg" style="width:100%;height:auto;"><p class="message"> <a href="#" @click="switch_login()">返回账号密码登录</a></p></form></template><div id="app"><a href="javascript:;" @click="compontentName='form_login'">登录</a><a href="javascript:;" @click="compontentName='form_register'">注册</a><a href="javascript:;" @click="compontentName='form_login_code'">二维码登录</a><div id="wrapper" class="login-page"><div id="login_form" class="form" ><transition name="fade" mode="out-in"><component @fatherMethod="test" :is="compontentName"></component></transition></div></div></div><script>ponent('form_login', {template: '#form_login',methods:{switch_code_login(){this.$pontentName='form_login_code';},switch_create(){this.$pontentName='form_register';},}})ponent('form_register', {template: '#form_register',methods:{switch_login(){this.$pontentName='form_login';}}})ponent('form_login_code', {template: '#form_login_code',methods:{switch_login(){this.$pontentName='form_login';}}})var vm = new Vue({el: '#app',data: {compontentName: 'form_login' },method:{}})</script></body></html>
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>/* 图形的初始状态 */.chart {width: 200px;height: 200px;background-color: orange;}/* 进入和离开的过程 */.box-enter-active, .box-leave-active {transition: height 2s; /* width的变化，动画时间是3秒 */}/* 进入初始状态 和 离开的结束状态*/.box-enter, .box-leave-to {height: 0px;}/* 进入的结束状态 和 离开的初始状态 */.box-enter-to, .box-leave {height: 200px;}</style><script src="vue.js"></script></head><body><div id="app"><button @click="toggle">{{show ? '收起' : '展开'}}盒子</button><transition name="box"><div class="chart" v-if="show">BOX</div></transition></div><script>var vm = new Vue({el: '#app',data: {show: true,},methods: {toggle () {this.show = !this.show // 每次都取反}}})</script></body></html>
