How can I save the current value when restarting the animation, and not reset it to zero?

Question

JavaScript

Sketched an accordion. https://codesandbox.io/s/ko3r37oz5v
Problem: if you press the button 3 times (i.e. start the animation, cancel it, and start again), the animation starts from the very beginning (the accordion collapses instantly).

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()
    }

Is it possible to somehow cache the value let value = { height: 0 }, and if it is not equal to 0, then start the animation from this place, and not from 0?

Answer 1

The method, in my opinion, is rather crutch, but ... the array that you bypass through v-for - add the height property to its elements, and pass the elements themselves to Tween. Somehow so .