Как при рестарте анимации сохранять текущее значение, а не обнулять?

Question

[hckn]

Набросал аккордеон. https://codesandbox.io/s/ko3r37oz5v

Проблема: если нажать 3 раза на кнопку (т.е. стартануть анимацию, отменить ее, и стартануть заново), то анимация стартует с самого начала (аккордеон схлопывается мгновенно).

enter (el, done) {
      function animate () {
        if (TWEEN.update()) {
          requestAnimationFrame(animate)
        }
      }
      let value = { height: 0 }
      new TWEEN.Tween(value)
        .to({ height: el.offsetHeight }, 2000)
        // .easing(TWEEN.Easing.Cubic.In)
        .onUpdate(function(object) {
          el.style.setProperty('height', value.height + 'px')
        })
        .onComplete(() => {
          done()
          console.log('DONE')
        })
        .start()
      animate()
    }

Можно ли как-то закешировать значение let value = { height: 0 }, и если оно не равно 0, то начинать анимацию именно с этого места, а не с 0?

Answer 1

[0xD34F]

Способ на мой взгляд довольно костыльный, но... массив, который вы обходите через v-for - добавить его элементам свойство height, и передавать сами элементы в Tween. Как-то так.

Comments

[hckn]

Да, про этот способ я хотел написать со старта (мол, так не очень красиво будет). Согласен что костыльный способ. Задачу конечно решает, но было интересно может можно как-то внутри функции анимации это все кешировать. Спасибо.

Имхо, эта функция должна быть в tween.js. Жаль что ее там похоже нету. Так бы идеальный вариант был юспользовать ее для анимашек.

Answer 2

[profesor08]

Перемудрил как-то с этим TWEEN. Попробуй gsap, получится гораздо проще.

import {TimelineMax} from "gsap";

export default {
  props: [],
  data () {
    return {
      blocks: [
        {title: 'one', content: 'lorem three...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...', show: false},
        {title: 'two', content: 'lorem three...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...', show: false},
        {title: 'three', content: 'lorem three...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...lorem two...', show: false}
      ]
    }
  },
  methods: {

    switchBlock (n) {
      if (this.blocks[n].show === true) {
        this.blocks[n].show = false;
      }
      else {
        this.blocks.forEach(function(block) {
          block.show = false;
        });

        this.blocks[n].show = true;
      }
    },

    enter (el, done) {

      new TimelineMax()
        .from(el, .5, {
          height: 0
        });
    },

    leave (el, done) {

      new TimelineMax()
        .to(el, .5, {
          height: 0
        });
    }
  }
}

Comments

[hckn]

Я согласен, tween.js многословен. Но он весит 5.5кб, тогда как GSAP весит 116кб. За решение спасибо, GSAP тоже буду смотреть (хотя такой мощный комбайн нуден редко)

[profesor08]

hckn, Импортируй только то что нужно.