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">

<transition-group name="flip-me" @move="myFlipMethod"> ...

</transition-group>

 

methods: {

    // Hook receives an array of elemen ts and an array of the position data myFlipMethod(elements, positions, done) {

    // Custom GSAP animation to move the elements, allowing for staggering and fancy effects

        var tl = new TimelineLite({ onComplete: done });

        elements.forEach( (el, i) => {

            tl.from( el, l, {

                x: positions[i].dx,

                y: positions[i].dy,

                ease: Elastic.easeOut,

                delay: i * 0.01

            });

        });

    }

jQuery UI Touch Punch

Velocity.js