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

Метод 1: использование прослушивателя событий Animationend

Один из способов сбросить CSS-анимацию в Lit Element — прослушать событие animationendи переключить класс CSS для перезапуска анимации. Вот пример:

import { css, LitElement } from 'lit';
class MyElement extends LitElement {
  static styles = css`
    .animated {
      animation: myAnimation 1s;
    }

    @keyframes myAnimation {
      /* Define your animation keyframes here */
    }
  `;

  constructor() {
    super();
    this._handleAnimationEnd = this._handleAnimationEnd.bind(this);
  }

  firstUpdated() {
    const animatedElement = this.shadowRoot.querySelector('.animated');
    animatedElement.addEventListener('animationend', this._handleAnimationEnd);
  }

  _handleAnimationEnd(event) {
    const animatedElement = event.target;
    animatedElement.classList.remove('animated');
    void animatedElement.offsetWidth; // Trigger reflow
    animatedElement.classList.add('animated');
  }

  render() {
    return html`
      <div class="animated">Element with Animation</div>
    `;
  }
}

В этом примере мы определяем CSS-анимацию под названием myAnimationи применяем ее к элементу с классом animated. Внутри метода _handleAnimationEndмы удаляем класс animated, запускаем перекомпоновку, обращаясь к свойству offsetWidth, а затем добавляем animatedкласс обратно к элементу.

Метод 2. Использование API веб-анимации

API веб-анимации предоставляет программный способ управления анимацией и манипулирования ею. В Lit Element вы можете использовать этот API для сброса CSS-анимации. Вот пример:

import { css, html, LitElement } from 'lit';
class MyElement extends LitElement {
  static styles = css`
    .animated {
      animation: myAnimation 1s;
    }

    @keyframes myAnimation {
      /* Define your animation keyframes here */
    }
  `;

  constructor() {
    super();
    this._animatedElement = null;
  }

  firstUpdated() {
    this._animatedElement = this.shadowRoot.querySelector('.animated');
    this._resetAnimation();
  }

  _resetAnimation() {
    this._animatedElement.style.animation = 'none';
    void this._animatedElement.offsetWidth; // Trigger reflow
    this._animatedElement.style.animation = null;
  }

  render() {
    return html`
      <div class="animated">Element with Animation</div>
    `;
  }
}

В этом подходе мы используем метод _resetAnimationдля сброса анимации. Это достигается путем установки свойства animationв значение 'none', запуска перекомпоновки и последующего удаления свойства animation.

Метод 3: использование манипуляции ключевыми кадрами CSS

Другой способ сбросить CSS-анимацию в Lit Element — напрямую манипулировать ключевыми кадрами. Вот пример:

import { css, LitElement } from 'lit';
class MyElement extends LitElement {
  static styles = css`
    .animated {
      animation-name: myAnimation;
      animation-duration: 1s;
    }

    @keyframes myAnimation {
      /* Define your animation keyframes here */
    }
  `;

  constructor() {
    super();
    this._animatedElement = null;
  }

  firstUpdated() {
    this._animatedElement = this.shadowRoot.querySelector('.animated');
    this._resetAnimation();
  }

  _resetAnimation() {
    const style = document.createElement('style');
    style.innerHTML = `
      @keyframes resetAnimation {
        from { transform: none; }
        to { transform: none; }
      }
    `;
    this.shadowRoot.appendChild(style);
    this._animatedElement.style.animationName = 'resetAnimation';
    void this._animatedElement.offsetWidth; // Trigger reflow
    this._animatedElement.style.animationName = 'myAnimation';
  }

  render() {
    return html`
      <div class="animated">Element with Animation</div>
    `;
  }
}

Здесь мы создаем новую анимацию ключевого кадра под названием resetAnimationс transform: none;как для from, так и для toключевые кадры. Когда анимацию необходимо сбросить, мы применяем эту анимацию ключевого кадра к элементу и запускаем перекомпоновку. Наконец, мы возвращаемся к исходной анимации, возвращая свойству animationNameзначение 'myAnimation'.

В этой статье мы рассмотрели три различных метода сброса CSS-анимации в Lit Element без замены элемента. Используя прослушиватели событий, API веб-анимации или напрямую манипулируя ключевыми кадрами, вы можете добиться плавного сброса анимации в своих веб-приложениях. Выберите метод, который лучше всего соответствует требованиям вашего проекта, и наслаждайтесь созданием увлекательного пользовательского опыта!