Vue+element+Css（Less）实现登录注册页面滑动切换效果

技术版本：Vue 2.6.14，element-ui 2.15.10，Node.js 16.13.2，vue-cli 5.0.0等

运行环境：VSCode

实现效果：实现了背景和盒子的同步左右滑动效果。

 实现过程：

HTML部分

两个按钮（去注册、去登录）绑定了两个点击事件，其中play()为播放动画方法。

表单部分使用了element表单元素，以及el-button等。

主体盒子：（该部分为屏幕中间的大盒子部分，及包含去登录、去注册等内容的大盒子）

<div class="box">
      <div class="left" v-show="left_show">
        <div>
          <p>Welcome</p>
          <p>仓储物流安全存储系统</p>
        </div>
        <el-button
          class="button"
          round
          size="small"
          @click="toRegister(), play()"
          >去注册</el-button
        >
      </div>
      <div class="right" v-show="right_show">
        <div>
          <p>Welcome</p>
          <p>仓储物流安全存储系统</p>
        </div>
        <el-button class="button" round size="small" @click="toLogin(), play()"
          >去登录</el-button
        >
      </div>
    </div>

表单部分：（此部分包含了登录和注册表单部分，动态绑定了三个类名move、back、newPosition，这三个类的作用在下面css部分进行讲解）

<div
      class="form-box"
      :class="{ move: isMove, back: isBack, newPosition: isNew }"
      :style="{ left: nowLeft + '%' }"
    >
      <transition name="el-fade-in">
        <el-form
          :model="registerForm"
          status-icon
          :rules="rules"
          ref="registerForm"
          label-width="100px"
          class="demo-ruleForm"
          size="small"
        >
          <div class="right-form" v-show="login_show">
            <el-form-item label="账 号" prop="lPhone">
              <el-input
                ref="inputPhone"
                type="text"
                v-model="registerForm.lPhone"
                autocomplete="off"
                placeholder="请输入手机号"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="密 码" prop="lPassword">
              <el-input
                type="password"
                v-model="registerForm.lPassword"
                autocomplete="off"
                placeholder="请输入密码"
                show-password
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="submitLogin()"
                size="small"
                round
                >登录</el-button
              >
            </el-form-item>
          </div>
          <div class="left-form" v-show="!login_show">
            <el-form-item label="昵 称" prop="name">
              <el-input
                ref="inputName"
                type="text"
                v-model="registerForm.name"
                autocomplete="off"
                placeholder="请输入昵称"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
              <el-input
                type="tel"
                v-model="registerForm.phone"
                autocomplete="off"
                placeholder="请输入手机号"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="密 码" prop="password">