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>