Vue+element+Css (Less) realizes the sliding switching effect of the login registration page

Technical version: Vue 2.6.14, element-ui 2.15.10, Node.js 16.13.2, vue-cli 5.0.0, etc.

Operating environment: VSCode

Achievement effect: The synchronous left and right sliding effect of the background and the box is realized.

 Implementation process:

HTML part

The two buttons (to register and to log in) are bound to two click events, among which play() is the method of playing animation.

The form part uses the element form element, and el-button, etc.

Main box: (this part is the big box part in the middle of the screen, and the big box containing content such as login and registration)

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