JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/yyx990803/vue/master/dist/vue.js"></script>
<script type="x-template" id="slider-tpl">
  <div id="slider" v-if="sliderService.opened" transition="slider">
    <div id="slider-backdrop" @click="sliderService.opened = false"></div>
    <div id="slider-content"></div>
  </div>
</script>

<button @click="showDoc()">Show</button>
<slider></slider>

SCSS

.slider-transition {
  transition: all .3s;
  #slider-backdrop {
    transition: opacity .3s;
    opacity: .5;
  }
  #slider-content {
    transition: transform .3s;
    transform: translateX(36px);
  }
}

.slider-enter, .slider-leave {
  opacity: 0.999;
  #slider-backdrop {
    opacity: 0;
  }
  #slider-content {
    transform: translateX(calc(100% + 36px));
  }
}

#slider {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  overflow: hidden;
}

#slider-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background-color: black;
  &:hover {
    cursor: pointer;
  }
}

#slider-content {
    height: 100%;
    width: calc(100% - 36px);
    transform: translateX(36px);
    background-color: white;
}

JavaScript

// Component
var sliderComponent = {
	template: '#slider-tpl',
  data: function() {
  	return {
    	sliderService: sliderService
    }
  }
};

// Service
var sliderService = {
	opened: false
};

// Master Vue
new Vue({
    el: 'body',
    data: {
    	sliderService: sliderService
    },
    methods: {
      showDoc: function () {
        this.sliderService.opened = true;
      }
    },
    components: {
    	'slider': sliderComponent
    }
});