basicScroll - にほんご。

.destroy()

インスタンスを削除します。 インスタンスが不要になった時に呼び出す必要があります。 インスタンスの全てのpropsは、 最後の値を保持します。

instance.destroy()

デモ

スクロールをして透明度が変化している途中で、 「削除」ボタンを押すと、押した時点での透明度で固定されます。
※このデモでは、.stop()と区別できませんが、 実際には.destroy()の後に.start()を実行してもアニメーションは動きません。

JavaScript

const instance = basicScroll.create({
  elem: document.querySelector('.element'),
  from: '0',
  to: '200px',
  props: {
    '--opacity': {
      from: 0,
      to: 1
    }
  }
});
instance.start();

document.querySelector('.destroy').addEventListener('click', function () {
  instance.destroy();
});

CSS

.element {
  width: 100px;
  height: 100px;
  background-color: #000;
 
  opacity: var(--opacity);
  will-change: opacity;
}

HTML

<button class="destroy">削除</button>
<div class="element"></div>

© 2018 Tobias Reich Released under the MIT license

このコンテンツはTobias Reich(electerious)によるbasicScrollドキュメントを翻訳/改変したものです。