current position:Home>Web front-end development technology: Web front-end development technology

Web front-end development technology: Web front-end development technology

2023-01-25 11:20:36nickdlk

一、实验目的:

掌握Vue提供的transition组件.
掌握animate.css动画库.

二、实验要求:

了解transition组件和animate.cssThe animation library basic use
Write a program to complete the following experiment content and submit the report

三、实验内容:

(一)实验基础

1、transition组件和animate.css动画库
(1) Through the label and the collocation of the label and other animation library using transition and animation.Use the element that needs to be animation control wrapped,Tags can be combined with6 个CSS类(3个进入过渡的类和3个离开过渡的类)实现过渡,animate.cssThe animation library can also be combined with the6 个CSSClass of the custom class name to achieve animation effects.
2、This experiment mainly throughtransition组件和animate.cssThe use of the animation library master the writing method of transition and animation.

(二)实验题

1、编写一个登录页面,使用Tab栏实现“账号登录”和“二维码登录”这两种方式的切换,并通过transition组件结合animate.css实现切换时的动画效果.
2、实现单击一个按钮后,切换盒子的展开和收起状态.

四、设计思路:

1. With the template design3个页面:登录、注册、二维码登录,使用变量控制3A template showing,显示使用transitionComponents to do the animation.
2.使用transition将div展开和收起

五、The problems in the experimental process and solution:

When using template display page may need to access father components and subcomponents and,尝试使用this.$emit,Let father components to monitor,Found too complicated,直接使用this.$parent.compontentName=‘form_login’;Access the parent component variablesTemplate切换.

六、程序源代码:




<!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">Already have an account? <a href="#" @click="switch_login()">立刻登录</a></p>
    </form>
  </template>
  <!-- 二维码登录 -->
  <template id="form_login_code">
    <form class="register-form">
      <span>I'm a qr code login component</span>
      <img src="img.jpg" style="width:100%;height:auto;">
      <p class="message"> <a href="#" @click="switch_login()">Return to the account password</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>

copyright notice
author[nickdlk],Please bring the original link to reprint, thank you.
https://en.cdmana.com/2023/025/202301251105497022.html

Random recommended