河南大学web开发技术（vue）实验四

感谢大家支持！！

吾日三省吾身：点赞乎？收藏乎？关注乎？

实验的准备阶段 (指导教师填写)	课程名称	Web开发技术
	实验名称	Tab栏与按钮实现动态切换（04500022004）
	实验目的	掌握内置过渡类名及自定义类名的使用 掌握JavaScript钩子创建动画 掌握单元素、多元素、多组件的过渡动画 掌握列表过渡的实现 掌握封装可复用过渡动画的方法
	实验内容	编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换，并通过transition组件结合animate.css实现切换时的动画效果 实现单击一个按钮后，切换盒子的展开和收起状态
	实验类型 （打R）	□验证性    □演示性     □设计性      R综合性
	实验的重点、难点	多组件的过渡动画 列表的过渡 封装可复用动画的方法
	实验环境	VSCode编辑器 Chrome浏览器
实验的实施阶段	实验步骤及实验结果	< 编写一个登录页面，使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换，并通过transition组件结合animate.css实现切换时的动画效果 前提：在head引入<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/> 1.1编写登陆页面和Tab栏，并在类中添加animate <div class="tabs">         <div style="display:inline-block;border:2px solid;"  class="tab" :class="{ active: activeTab === 'account' }" @click="activeTab = 'account'">账号登录</div>         <div style="display:inline-block;border:2px solid;" class="tab" :class="{ active: activeTab === 'qrCode' }" @click="activeTab = 'qrCode'">二维码登录</div>     </div> 1.2扩充内容实现登录     1.2.1账号登陆           思路：正常的input登录界面实现，最后再用个盒子来实现登陆后的提示就行，但要注意的是整个登陆界面用transition包裹起来，再通过设定enter和leave的状态，即引用animated.css来实现动态效果；值得注意的是这里没有给登录写具体的功能逻辑，只要点击登录就会通过一个盒子显示登陆成功           代码如下：<transition name="slide" enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut" >         <div v-if="activeTab === 'account'" class="login-box">             <h2>账号登录</h2>             <!-- account login form -->             <ul>                 <li>                     <lable>账号：</lable>                     <input>                 </li>                 <li>                     <label>密码：</label>                     <input>                 </li>             </ul>             <button @click="login">登录</button>             <button>取消</button>             <div v-if="showSuccessDialog" class="dialog">                 <p>成功登录</p>                 <button @click="closeDialog">关闭</button>             </div>         </div> script代码如下： login(){                 this.showSuccessDialog = !this.showSuccessDialog;             },             closeDialog(){                 this.showSuccessDialog = !this.showSuccessDialog;             }     </transition>     1.2.1二维码登录           思路：点击二维码登录后出现二维码图片显示，用草料二维码做一个登陆成功的文本，保存二维码后导入图片           代码如下：<transition name="slide"  enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">         <div v-if="activeTab === 'qrCode'" class="login-box">             <h2>二维码登录</h2>             <img src="./qcsuccess.png" alt="登录二维码">             <!-- qr code login form -->         </div>     </transition> 实现单击一个按钮后，切换盒子的展开和收起状态 写一个按钮来引导用户展开和收起盒子，按钮绑定一个逻辑值，用户的点击切换这个值的状态，而盒子又通过v-show来绑定这个状态，以此实现盒子的展开与收起，具体实现代码如下（注意图片需要自己导入）： <button @click="toggleBox">{{showButton}}</button>     <transition >         <div v-show="showBox" class="toggle-box">             <!-- content of the box -->             <img src="./red.png" alt="大红色">         </div> </transition> Script代码如下： toggleBox() {                 this.showBox = !this.showBox;                 this.showButton = this.showBox? '收起':'展开'             }, 最终实现效果：
实验结果的处理阶段	实验结果的分析与总结	通过本次实验我了解到如何在Vue.js中使用transition组件和animate.css库来创建动画效果。特别是如何使用enter-active-class和leave-active-class属性来指定元素进入和离开的过渡动画。你还可以了解到如何使用v-if指令来控制元素的显示和隐藏，以及如何使用v-bind:class或者:class来动态添加和移除animate.css的类。