Vue.js: динамическое CSS-свойство в псевдо-элементе ::before

Question

Всем привет, уважаемые разработчики!

Мне необходимо переписать данный пример: Pure CSS Puzzle Grid Gallery на Vue.js.

Проблема возникла, когда я захотел динамически подставлять URL картинок в CSS. Причем не просто в стиль компонента, а нужно попасть в псевдо-элемент ::before:

.puzzle::before {
  content: "";
  /* Пробовал так - ничего не сработало */
  background-image: url(attr(data-src));
  /* Тут также ничего не сработало, даже если data-src обёрнут в `url("${}")` */
  background-image: attr(data-src);
  /* Со статичной ссылкой работает */
  background-image: url("https://unsplash.it/600/600?image=1011");
}

При этом код шаблона выглядит так:

<div :class="pieceClasses">
  <div :class="puzzleClasses"
    :data-src="imageSrc"
  />
</div>

где imageSrc - это URL изображения

Подскажите, пожалуйста, как можно решить данную задачу.

Answer 1

Нашёл как привязать динамическое значение к свойству псевдо-элемента

Динамически устанавливать собственные свойства компонента и здесь же указывать кастомные свойства:

<div :class="pieceClasses">
  <div :class="puzzleClasses"
    :style="`--my-src: url(${imageUrl})`"
  />
</div>

Внутри псевдо-элемента нужное нам CSS-свойство будет захватывать значение из нашего кастомно свойства:

.puzzle::before {
  background-image: var(--my-src);
}

Теперь свойство background-image псевдоэлемента .puzzle::before захватывает URL из переменной через кастомное свойство --my-src.

Однако, должен отметить, что конкретно для URL-ов такая привязка работает не так хорошо, как мне хотелось бы. Дело в том, что браузер формирует кучу запросов на скачивание бэгграунда с каждым тиком анимации! Думаю, браузер просто видит, что свойство нестатично, а значит пытается обновлять бэгграунд с ходом анимации.

БЛОГ НА HUSL

Vue.js: динамическое CSS-свойство в псевдо-элементе ::before

Ответы (1 шт):