http://slides.com/smilee/vuetiful-animations/live

Prototype

HTML & CSS

Prototype

CSS & JS

Produce

HTML, CSS, & JS

<transition>

</transition>

<transition>

    <div v-if="condition"></div>

</transition>

Conditional Rendering

<transition>

    <div v-show="condition"></div>

</transition>

Transition CSS Classes

<transition name="fade">

    <div v-if="condition"></div>

</transition>

<style>

    .fade-enter {}

    .fade-enter-active {}

    .fade-leave {}

    .fade-leave-active {}

</style>

Task1.draggable.enabled = true
Task1.draggable.vertical = false

$('.draggable').draggable({
    axis: 'y'
});

<script src="js/jquery.ui.touch-punch.min.js"></script>

<transition-group name="flip-list" tag="ul">

    <li v-for="item in items" v-bind:key="item">

        {{ item }}

    </li>

</transition-group>

.*-move {

 

}

.*-move {
    transition: transform 0.2s;
}

<transition

    @before-enter="beforeEnter"

    @enter="enter"

    @after-enter="afterEnter"

    @enter-cancelled="enterCancelled"

    @before-leave="beforeLeave"

    @leave="leave"

    @after-leave="afterLeave"

    @leave-cancelled="leaveCancelled">