一、实验目的：

掌握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.$parent.compontentName=‘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>Vue.component('form_login', {template: '#form_login',methods:{switch_code_login(){this.$parent.compontentName='form_login_code';},switch_create(){this.$parent.compontentName='form_register';},}})Vue.component('form_register', {template: '#form_register',methods:{switch_login(){this.$parent.compontentName='form_login';}}})Vue.component('form_login_code', {template: '#form_login_code',methods:{switch_login(){this.$parent.compontentName='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>

Web前端开发技术:Web前端开发技术相关推荐

web前端开发中需要掌握的技术：
web前端开发中需要掌握的技术: 1.学习HTML,这是最简单,最基本的是要掌握div,formtable.Ulli.P.跨度.字体这些标签,这些都是最常用的,尤其是DIV和表格,DIV,表也可以用于 ...
24HTML5期末大作业：XXX 网站设计——指环王：护戒使者(13页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程网页规
HTML5期末大作业:XXX 网站设计--指环王:护戒使者(13页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规划 ...
HTML5期末大作业：XXX 网站设计——指环王：护戒使者(13页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规
HTML5期末大作业:XXX 网站设计--指环王:护戒使者(13页) HTML+CSS+JavaScript HTML+CSS+JS网页设计期末课程大作业 web前端开发技术 web课程设计网页规划 ...
HTML期末大作业—— 迪士尼影视电影(6页) HTML+CSS+JavaScript 网页设计期末课程大作业 web前端开发技术 web课程设计网页规划与设计
HTML5期末大作业:影视电影网站设计-- 迪士尼影视电影(6页) HTML+CSS+JavaScript 网页设计期末课程大作业 web前端开发技术 web课程设计网页规划与设计文章目录 HTM ...
HTML5期末大作业：影视电影网站设计—— 迪士尼影视电影(6页) HTML+CSS+JavaScript 网页设计期末课程大作业 web前端开发技术 web课程设计网页规划与设计
HTML5期末大作业:影视电影网站设计-- 迪士尼影视电影(6页) HTML+CSS+JavaScript 网页设计期末课程大作业 web前端开发技术 web课程设计网页规划与设计常见网页设计作业 ...
HTML期末大作业 ~ 马尔代夫旅游网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计...
HTML期末大作业 ~ 大学生旅游官网网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计~ 临近期末, 你还在为HTML网页设 ...
葡萄城首席架构师：前端开发与Web表格控件技术解读
讲师:Issam Elbaytam,葡萄城集团全球首席架构师(Chief Software Architect of GrapeCity Global).曾任 Data Dynamics.Inc 创始 ...
HTML我的家乡杭州网页设计作业源码(div+css)~ HTML+CSS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业
HTML我的家乡杭州网页设计作业源码(div+css)~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计 ~HTML期末大作业临近期末, 你还 ...
html网页设计期末大作业——化妆品展示静态模板(9页) web前端开发技术 web课程设计网页规划与设计
html网页设计期末大作业--化妆品展示静态模板(9页) web前端开发技术 web课程设计网页规划与设计常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶 ...
HTML奥运网页5页面文化 ~ 体育学生网页设计作业 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计
HTML奥运网页5页面文化 ~ 体育学生网页设计作业 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计临近期末, 你还在为HTML网页设计结 ...

Web前端开发技术:Web前端开发技术