Задать вопрос
AntonBrock
@AntonBrock
screen light
vue

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

Ребят, привет, как можно плавно сменять картинки во 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")}
  • Вопрос задан
  • 835 просмотров
1 комментарий
Подписаться 1 Простой 1 комментарий
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
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/
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend Vue & Capacitor Developer Middle++
Parasol Software
от 2 000 до 2 500 $
Разработчик Vue.js
Кортекс
от 60 000 до 100 000 ₽
Frontend developer (middle/senior)
//stablecode
от 210 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Обработать массив фотографий
19 апр. 2024, в 08:46
5000 руб./за проект
Скрыть / убрать лишние поля в форме заказа
19 апр. 2024, в 07:30
1500 руб./в час
Доработать телеграм бота
19 апр. 2024, в 03:52
1000 руб./за проект
Ещё заказы