"Vue.j real" exercise book page 2 try p117

Exercise 2: try to switch the display pane and hide, animated slide. Tip: You can use the css transform 3:
translateX.

Demo Online Effects Browser

 

Compared with Exercise 1, the components of the pane changes, the component pane into a transitional assembly available:

1, in the template, the assembly wrapped with a transition div element, provided name and mode characteristics.

2, in the style added .pane other class. In fact, the class pane in the book has been set up, but did not fill in the details, to be author of a cue bar.

<template>
<transition name="fade" mode="out-in">

    <div class="pane" v-show="show">
        <slot></slot>
    </div>

</transition>
</template>

<style>
.pane{
    display: inline-block;
}
 .fade-enter-active,.fade-leave-active{
     position: absolute;
     transition: all .8s ease;
}
.fade-enter, .fade-leave-to{
    transform: translateX(100px);
    opacity: 0;
}
</style>