title: Create sliding left effect using Vuejs animation
body: <p>I've read <a href="https://v2.vuejs.org/v2/guide/transitions.html" rel="nofollow noreferrer">this official</a> document about Vuejs animation. But using it css hooks, I can only make element appear/disappear with fade and different duration.</p>
  <pre><code>&lt;div id=&quot;demo&quot;&gt;
    &lt;button v-on:click=&quot;show = !show&quot;&gt;
      Toggle
    &lt;/button&gt;
    &lt;transition name=&quot;fade&quot;&gt;
      &lt;p v-if=&quot;show&quot;&gt;hello&lt;/p&gt;
    &lt;/transition&gt;
  &lt;/div&gt;
  
  
  .fade-enter-active, .fade-leave-active {
    transition: opacity .5s
  }
  .fade-enter, .fade-leave-to /* .fade-leave-active in &lt;2.1.8 */ {
    opacity: 0
  }
  </code></pre>
  <p>How to use Vuejs Animation to create a sliding effect? Like the one <a href="http://www.jssor.com/demos/full-width-slider.slider" rel="nofollow noreferrer">here</a>.  Is it possible? Please provide some sample code.</p>