How to fade in images when loaded with Vue
You can use the v-on: (or @ shorthand) syntax for binding to any DOM event. In your case the load event, which is triggered when the image is loaded.
Because you are loading the image "the DOM way" you can't use v-if because then Vue will not render the element (but you need it to, so the image src is fetched). Instead you can use v-show, which will render but hide the element.
Vue.component('imageThatFadesInOnLoad', {
data: function() {
return {
src: 'http://via.placeholder.com/350x150',
loaded: false,
}
},
methods: {
onLoaded() {
this.loaded = true;
}
},
template: `
<div class="wrapper">
<transition name="fade">
<img class="icon" v-bind:src="src" v-on:load="onLoaded" v-show="loaded">
</transition>
</div>
`
});
new Vue({
el: '#wrapper'
});.wrapper {
width: 350px;
height: 150px;
background: slategrey;
}
.fade-enter-active {
transition: opacity 3s ease-in-out;
}
.fade-enter-to {
opacity: 1;
}
.fade-enter {
opacity: 0;
}<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="wrapper">
<image-that-fades-in-on-load></image-that-fades-in-on-load>
</div>