Многогранная анимация плюс ширина создает дрожание - PullRequest
Новая
       9

Многогранная анимация плюс ширина создает дрожание

0 голосов
/ 03 апреля 2019

Во время недавней реализации нового компонента метки у меня возникла проблема, с которой я никогда раньше не сталкивался.

Этот компонент метки должен отображать первую букву при покое. Если метка перемещается, ширина будет увеличена за счет анимации, чтобы отобразить полный текст. Если окончательный полный текст слишком длинный, его следует обрезать многоточием.

Проблема в том, что при наведении метки вычисление многоточия + анимация ширины + изменение внутреннего текста вызывает ужасное дрожание.

Вот пример кода, просто наведите указатель мыши на компонент.

ПРИМЕЧАНИЕ: В этом примере я использую функцию пользовательских элементов, убедитесь, что вы используете совместимый браузер. 

class LabelComponent extends HTMLElement {
  short = 'A';
  long = 'A very long item name';
  _eventSet = new Set();
  constructor() {
    super();
    this.innerText = this.short;
    this._eventSet.add({
      trigger: 'mouseenter',
      callback: () => {
        this.innerText = this.long;
      }
    });
    this._eventSet.add({
      trigger: 'mouseleave',
      callback: () => {
        this.innerText = this.short;
      }
    });
  }

  _registerEvents() {
    this._unRegisterEvents();
    for (let eventItem of this._eventSet) {
      this.addEventListener(eventItem.trigger, eventItem.callback);
    }
  }

  _unRegisterEvents() {
    for (let eventItem of this._eventSet) {
      this.removeEventListener(eventItem.trigger, eventItem.callback);
    }
  }

  connectedCallback() {
    this._registerEvents();
  }

  disconnectedCallback() {
    this._unRegisterEvents();
  }
}


customElements.define('label-component', LabelComponent);
label-component {
  display: block;
  width: 20px;
  height: 20px;
  background: orange;
  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.35s ease;
  border-radius: 3px;
}

label-component:hover {
  width: 120px;
}
<label-component></label-component>

Есть какие-нибудь идеи по устранению этой проблемы?

...