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" ></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%);
       }
     }

动画效果图：