Как можно плавно сменять картинки во Vue.Js?

Question

[Darkness]

Ребят, привет, как можно плавно сменять картинки во vue?
Я привязал элемент через ref, после по событиям mousover и mouseout меняю картинки (иконки), но как можно добиться плавности?

a(href="#" class="_available-a" @mouseover="changeIcon" @mouseout="changeIconBack")
    img(src="~assets/img/chrome_icon-white(png).png", 
    alt="chrome icon" 
    ref='icon' 
    width='25')
    span Chrome

changeIconLogo(){
  this.$refs.logoSite.src = require("~/assets/img/logoNotEmpty.png")},
 changeIconBackLogo(){
  this.$refs.logoSite.src = require("~/assets/img/logo_empty.png")}

Comments

[alex]

никак. вы вот логически подумайте - как можно анимириовать свойство src? анимируются только те свойства, значения которых численные. в вашем случае через background-image нужно сделать подложку с logo_empty.png, а img с logoNotEmpty.png сделать прозрачным. при наведении убиртаь прозрачность. и все делается через css, js тут вообще не нужен

Answer 1

[0xD34F]

transition:

data: () => ({
  image: 0,
  images: [ 'раз картинка', 'два картинка', 'три картинка' ],
}),

<button v-for="(n, i) in images" @click="image = i">
  Показать картинку #{{ i }}
</button>

<transition name="image" mode="out-in">
  <img :key="image" :src="images[image]">
</transition>

.image-enter-active,
.image-leave-active {
  transition: opacity .3s;
}

.image-enter,
.image-leave-to {
  opacity: 0;
}

https://jsfiddle.net/po6ge103/