
vuejs
🚀
note2self
🚀
VueJS Transition Helper
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.