vue + element 侧边滑出效果

点击一个按钮出现下图：感觉如果右侧不是滑出来的 ，就感觉 怪怪的。然后就把这玩意儿 抽出来做了一个简单的组件使用

 

 

 

slid组件代码

<template>
  <div class='component-slid' v-if="show">
      <!-- component-slid-open 和 component-slid-out 是keyframes动画效果的 -->
      <div :class="showSlid ? 'component-slid-open' : 'component-slid-out'">
          <!-- 在组件内书写内容slot接收嘛 -->
          <slot></slot>  
      </div>
  </div>
</template>

<script>
export default {
  components: {},
  name: 'component-slid',
  props:{
      showSlid:{
          type: Boolean,
          default: false
      }
  },
  data(){
    return {
        show:false
    }
  },
  created(){},
  mounted(){},
  updated(){
    //   至于这里给了一个延时器  主要是为了 返回时能完成 回退的一个动画效果
      setTimeout(() => {
          this.show = this.showSlid
      },300)
  },
  methods: {}
}
</script>
<style lang='scss' scoped>
.component-slid{
    position: absolute;
    top:0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(000, 000, 000, 0.3);
    .component-slid-open{
        position: absolute;
        top: 0;
        right: 0;
        width: 600px;
        height: 100%;
        background: #fff;
        opacity: 1;
        animation: slid-open 0.5s ease;
    }
    .component-slid-out{
        position: absolute;
        top: 0;
        right: 0;
        width: 600px;
        height: 100%;
        background: #fff;
        animation: slid-out 0.5s ease;
    }
}
@keyframes slid-open{
    0%{
        transform: translateX(100%);
        opacity: 0;
    }
    100%{
        transform: translateX(0);
    }
}
@keyframes slid-out{
    0%{
        width: 600px;
        transform: translateX(0)
    }
    100%{
        transform: translateX(100%)
    }
}
</style>

 

这个东西 主要是做一下笔记 

使用的话

<template>
  <div class='weather'>
    <el-button type="primary" @click="openSlid">主要按钮</el-button>
    <component-slid :showSlid="showSlid">
      <span @click="back">&lt; 返回</span>
    </component-slid>
  </div>
</template>

<script>
import componentSlid from './components/component-slid'
export default {
  components: {componentSlid},
  name: 'weather',
  data(){
    return {
      showSlid:false
    }
  },
  created(){},
  mounted(){},
  methods: {
    openSlid(){
      this.showSlid = true
    },
    back(){
      this.showSlid = false
    }
  }
}
</script>
<style lang='scss' scoped>
</style>