vue 自己编写向左滑动的动画 仿transition

vue 模板代码：

<div class="content-wrap clearfix" :class="{slideIn: showIn, slideOut: showOut}">
          <!--创建设备模型窗口one-->
          <div class="contentOne" key="one">
            <div class="header">
              <span class="title">创建设备模型</span>
            </div>
            <el-form label-position="left" label-width="100px" ref="createModelForm" :model="createModelForm" :rules="rules">
              <el-form-item label="设备模型名称" prop="productKeyName">
                <el-col>
                  <el-input placeholder="设备模型名称（如: 零壹的人体红外传感器）" v-model="createModelForm.productKeyName" clearable></el-input>
                </el-col>
              </el-form-item>
              <el-form-item label="设备类型" prop="formCodeName">
                <el-col class="basicType">
                  <div @click="openModelList" style="cursor:pointer;">
                    <!--<span class="el-input__inner" :class="createModelForm.formCodeName?'':'placeholder'">{{createModelForm.formCodeName?createModelForm.formCodeName:'请点击选择设备类型'}}</span>-->
                    <el-input class="noInput" v-model="createModelForm.formCodeName" placeholder="请点击选择设备类型" readonly="readonly"></el-input>
                    <span class="iconfont" >&#xe609;</span>
                  </div>
                </el-col>
              </el-form-item>
              <el-form-item label="节点类型" prop="nodeType">
                <el-col>
                  <el-radio-group v-model="createModelForm.nodeType">
                    <el-radio label="1">终端设备</el-radio>
                    <el-radio label="2">网关</el-radio>
                  </el-radio-group>
                </el-col>
              </el-form-item>
              <el-form-item label="通讯方式" prop="protocolType">
                <el-col>
                  <el-radio-group v-model="createModelForm.protocolType">
                    <el-radio label="B">ZigBee</el-radio>
                    <el-radio label="A">Wifi</el-radio>
                    <el-radio label="0">其他</el-radio>
                  </el-radio-group>
                </el-col>
              </el-form-item>
              <el-form-item label="数据格式" prop="dataFormat">
                <el-col>
                  <el-select v-model="createModelForm.dataFormat" placeholder="请选择" disabled>
                    <!--<el-option-->
                      <!--v-for="item in options"-->
                      <!--:key="item.value"-->
                      <!--:label="item.label"-->
                      <!--:value="item.value">-->
                    <!--</el-option>-->
                  </el-select>
                </el-col>
              </el-form-item>
              <el-form-item label="描述">
                <el-col >
                  <el-input
                    type="textarea"
                    :rows="4"
                    placeholder="请输入内容"
                    v-model="createModelForm.description"
                    clearable>
                  </el-input>
                </el-col>
              </el-form-item>
            </el-form>
            <div class="footer">
              <el-button @click="createModelDialog = false; showOut = false; showIn = false">取 消</el-button>
              <el-button type="primary" @click="createModel">确 定</el-button>
            </div>
          </div>
          <!--创建设备模型窗口two-->
          <div class="contentTwo" key="two">
            <div class="header">
              <el-button class="back" @click="closeModelList">&lt;返回</el-button>
              <el-button class="close" @click="closeModelList">关闭</el-button>
            </div>
            <div class="body">
              <h1 class="title">请选择设备类型</h1>
              <ul class="list">
                <li
                  class="type"
                  v-for="(item, index) of basicTypeList"
                  :key="index"
                  :class="{active: liIndex === index}"
                  @click.stop.prevent="openTypeDetail(item, index)">
                  {{ item.deviceTypeName }}
                </li>
              </ul>
              <div class="tip forbidden">找不到合适的?申请创建一个新的设备类型></div>
            </div>
          </div>
        </div>

data:

data () {
    return {
        showIn: false, // 控制滑动动画
        showOut: false, // 控制滑动动画
    }
}

js:

openModelList () {
      this.getProductList() // 打开弹窗的时候请求数据
      // this.createModelOne = false
      // setTimeout(() => {
        // this.createModelTwo = true
      // }, 200)
      this.showIn = true
      this.showOut = false
    },
    closeModelList () {
      this.showIn = !this.showIn
      this.showOut = true
    },
          

css:

// 滑动动画
    .slideIn {
      animation: slideIn1 .3s ease forwards;
      // animation-fill-mode: forwards;
    }
    .slideOut {
      animation: slideOut .3s ease forwards;
      // animation-fill-mode: forwards;
    }
    @keyframes slideIn1 {
      0% {
        transform: translateX(0%);
      }
      100% {
        transform: translateX(-50%);
      }
    }
    @keyframes slideOut {
      0% {
        transform: translateX(-50%);
      }
      100% {
        transform: translateX(0%);
      }
    }

动画效果图：