VueJS Transition Helper

Posted: 2017-12-28 15:58:55

There are docs on how to get a Transition to take effect when an item loads https://vuejs.org/v2/guide/transitions.html#Transitioning-Single-Elements-Components

But I was not having much luck with this using https://uiv.wxsm.space/carousel.

I ended up making a quick helper function to keep it from looking like exploded elements.

You can see the results of this change here

So the steps followed per the docs above for the most part.

Add to my scss file:


.ibox-content.text-center.carousel { min-height: 400px; } .fade-enter-active, .fade-leave-active { transition: opacity .5s; } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0; }

Make a TransitionHelper.vue componenent:

<template>
   <transition name="fade">
        <div v-show="show" >
            <slot></slot>
        </div>
    </transition>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  },
  mounted() {
    this.show = true;
  }
};
</script>

Then added to my app.js

Vue.component('transition-helper', require('./components/TransitionHelper.vue'));

Finally wrapped my blade file output in this helper.

        <transition-helper style="display: none;">
            <carousel class="homepage-featured-carousel" :indicators="false" :controls="true" :interval="0">
                @foreach($featured_documents->chunk(6) as $chunk)
                <slide>
                    <div class="row-fluid">

                        @foreach($chunk as $item)
                        <div class="col-xs-2">
                            <div class="ibox float-e-margins homepage-featured-item">

                                <div class="ibox-title">
                                    <img class="img-responsive" src="images/ces/image_placeholder.svg" alt="">
                                </div>

                                <div class="ibox-content">

You can see the display:none kicking in before the page loads js etc keeping it well hidden. Then once it is all loaded and we are ready I show it and transition it in.