Vue3 TypeScript 动画，实现动态登陆页面

动态切换登陆和注册，动画效果

文章目录

• 前言
• 一、HTML
• 二、JavaScript
• 三、CSS

前言

这是基于Vue3 + TypeScript + animation + Element-UI Plus + Element-UI icon结合实现的动态帅气的登陆页面

一、HTML

<template>
  <div class="container">
    <div class="sign-box">
      <!-- 登陆功能 -->
      <div
        class="sign-in-box"
        :class="{ 'sign-in-bg': !show, 'sign-bg-left': isShow }">
        <h2
          style="
            font-size: 30px;
            text-align: center;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
              Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
              sans-serif;
          ">
          Sign In
        </h2>
        <div style="display: flex; margin-top: 20px">
          <el-input
            v-model="login_Obj.username"
            style="width: 240px; height: 40px"
            :prefix-icon="User"
            placeholder="Please username" />
        </div>
        <div style="display: flex; margin-top: 20px">
          <el-input
            v-model="login_Obj.password"
            style="width: 240px; height: 40px"
            :prefix-icon="Lock"
            placeholder="Please password" />
        </div>
        <div style="text-align: center; margin-top: 20px">
          <el-button type="primary" size="default" @click="login">
            Sign In
          </el-button>
        </div>
      </div>
      <!-- 注册页面 -->
      <div
        class="sign-up-box"
        :class="{ 'sign-bg-right': !show, 'sign-up-bg': isShow }">
        <h1
          style="
            font-size: 30px;
            text-align: center;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
              Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue',
              sans-serif;
          ">
          Sign Up
        </h1>
        <div style="display: flex; margin-top: 20px">
          <el-input
            v-model="register_Obj.email"
            style="width: 240px; height: 40px"
            :prefix-icon="Message"
            placeholder="Please email" />
        </div>
        <div style="display: flex; margin-top: 20px">
          <el-input
            v-model="register_Obj.username"
            style="width: 240px; height: 40px"
            :prefix-icon="User"
            placeholder="Please username" />
        </div>
        <div style="display: flex; margin-top: 20px">
          <el-input
            v-model="register_Obj.password"
            style="width: 240px; height: 40px"
            :prefix-icon="Lock"
            placeholder="Please password" />
        </div>
        <div style="text-align: center; margin-top: 20px">
          <el-button type="primary" size="default" @click="register">
            Sign Up
          </el-button>
        </div>
      </div>
      <!-- 按钮区域 -->
      <div class="sign-in-btn" :class="{ 'sign-bt-left': !show }">
        <button @click="signIn">Sign In(登陆按钮功能)</button>
      </div>
      <div
        class="sign-up-btn"
        :class="{ 'sign-up-btn-left': !show, 'sign-bt-right': isShow }">
        <button @click="signUp">Sign Up(注册按钮功能)</button>
      </div>
    </div>
  </div>
</template>

二、JavaScript

import { User, Lock, Message } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue'
let show = ref(true)
let isShow = ref(false)
// 账号密码
let login_Obj = reactive({
  username: '',
  password: '',
})
let register_Obj = reactive({
  email: '',
  username: '',
  password: '',
})

const login = () => {
  console.log(login_Obj)
}

const register = () => {
  console.log(register_Obj)
}

const signUp = () => {
  show.value = !show.value
  isShow.value = false
}
const signIn = () => {
  show.value = true
  isShow.value = !isShow.value
}

三、CSS

.container {
  width: 100%;
  height: 100vh;
  background: url('./img/bgimg3.jpg') no-repeat;
  background-position: center center;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;
  .sign-box {
    display: flex;
    width: 754px;
    height: 450px;
    border-radius: 10px;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
    .sign-up-box {
      position: absolute;
      opacity: 0;
      z-index: 0;
      background-color: #e9e9e9;
      width: 50%;
      height: 100%;
      padding: 90px 70px;
    }
    .sign-in-box {
      position: absolute;
      background-color: #e9e9e9;
      width: 50%;
      height: 100%;
      z-index: 1;
      padding: 90px 70px;
    }

    .sign-up-btn {
      position: absolute;
      left: 50%;
      width: 50%;
      height: 100%;
      text-align: center;
      padding: 200px 70px;
      button {
        background-color: #409eff;
        border-radius: 50px;
        padding: 20px;
        color: #ffffff;
      }
    }

    .sign-in-btn {
      position: absolute;
      opacity: 0;
      z-index: 0;
      left: 50%;
      width: 50%;
      height: 100%;
      text-align: center;
      padding: 200px 70px;
      button {
        background-color: #409eff;
        border-radius: 50px;
        padding: 20px;
        color: #ffffff;
      }
    }

    .sign-in-bg {
      z-index: 0;
      opacity: 0;
    }
    .sign-up-bg {
      z-index: 0;
      opacity: 0;
    }
    .sign-up-btn-left {
      z-index: 0;
      opacity: 0;
    }

    .sign-bt-left {
      animation: show 1s forwards;
    }
    .sign-bt-right {
      animation: show3 1s forwards;
    }
    .sign-bg-right {
      animation: show1 1s forwards;
    }
    .sign-bg-left {
      animation: show4 1s forwards;
    }
  }
  @keyframes show {
    0% {
      left: 50%;
      opacity: 0;
      z-index: 0;
    }
    100% {
      left: 0;
      opacity: 1;
      z-index: 5;
    }
  }
  @keyframes show1 {
    0% {
      left: 0;
      opacity: 1;
      z-index: 0;
    }
    100% {
      left: 50%;
      opacity: 1;
      z-index: 5;
    }
  }
  @keyframes show3 {
    0% {
      left: 0%;
      opacity: 1;
      z-index: 0;
    }
    100% {
      left: 50%;
      opacity: 1;
      z-index: 5;
    }
  }

  @keyframes show4 {
    0% {
      left: 50%;
      opacity: 1;
      z-index: 0;
    }
    100% {
      left: 0;
      opacity: 1;
      z-index: 5;
    }
  }
}