Vueを使用して画像をフェードインする方法

Question

このコンポーネントは、クライアントにロードされた画像をフェードインして作成しました。私はVueイベントを使用するのと同じように、これを解決するVueのような方法があると思うが、見つけられない。イメージが読み込まれたときに検出するVueの方法は何ですか？

https://codepen.io/kslstn/pen/ooaPGW

Vue.component('imageThatFadesInOnLoad',{ 
 

 
    data: function(){ 
 
    return { 
 
     src: 'http://via.placeholder.com/350x150', 
 
     loaded: false, 
 
    } 
 
    }, 
 

 
    mounted: function() { 
 
    var image = new Image() 
 
    var that = this 
 
    this.loaded = image.addEventListener('load', function(){that.onLoaded()}) // This is the key part: it is basically vanilla JS 
 
    image.src = this.src 
 
    }, 
 

 
    methods:{ 
 
    onLoaded(){ 
 
     this.loaded = true 
 
    } 
 
    }, 
 

 
    template: ` 
 
    <div class="wrapper"> 
 
     <transition name="fade"> 
 
     <img class="icon" v-bind:src="src" v-if="loaded">&nbsp; 
 
     </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/vue@2.4.4/dist/vue.js"></script> 
 
<div id="wrapper"> 
 
<image-that-fades-in-on-load></image-that-fades-in-on-load> 
 
</div>

Answer 1

あなたは、任意のDOMイベントへの結合のための構文v-on:（または@速記）を使用することができます。あなたのケースでは、loadイベントが発生し、イメージがロードされたときにトリガーされます。

イメージをロードするときに、v-ifを使用することはできません。その場合、Vueは要素をレンダリングしません（イメージsrcがフェッチされるために必要です）。代わりにv-showを使用すると、レンダリングされますが、要素は非表示になります。

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">&nbsp; 
 
     </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/vue@2.4.4/dist/vue.js"></script> 
 

 
<div id="wrapper"> 
 
    <image-that-fades-in-on-load></image-that-fades-in-on-load> 
 
</div>