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

最新推荐文章于 2024-05-01 22:48:12 发布

nickdlk

最新推荐文章于 2024-05-01 22:48:12 发布

阅读量2.1k

点赞数 2

分类专栏： VUE 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43924621/article/details/112717500

版权

VUE 专栏收录该内容

7 篇文章 3 订阅

订阅专栏

一、实验目的：

掌握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>

nickdlk

关注

2
点赞
踩
13

收藏

觉得还不错? 一键收藏
打赏
1
评论
Web前端开发技术:Web前端开发技术

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

扫一扫