React + gsap использовать случайную группу элементов анимации не может работать, когда она завершится? - PullRequest
Новая
       17

React + gsap использовать случайную группу элементов анимации не может работать, когда она завершится?

2 голосов
/ 12 марта 2020

Я использую gsap для создания анимации.

При нажатии кнопки создается анимация пузыря.

Когда анимация завершена, она разрушается.

Я думаю вопрос в использовании карты на React component, но я не могу найти другой случай

Вот мой код React и пример js скрипка:

https://jsfiddle.net/xiaowang/ueqsg83j/58/ 

const { useState, useEffect, useRef } = React;

gsap.registerPlugin(MotionPathPlugin)

const Bubble = ({ onClose, data }) => {
    const pointRef = useRef(null)
    useEffect(() => {
    const path = []
    let offsetY = 0
    for(let i = 0; i < 10; i++) {
      const y = offsetY - Math.floor(Math.random() * 20 + 30)
      offsetY = y
      path.push({ x: Math.floor(Math.random() * 40 - 20), y })
    }
    gsap.to(pointRef.current, 5, {
      motionPath: {
        path,
        type: 'cubic'
      },
      onComplete: () => onClose()
    })
    return () => {}
  }, [])
    return (<span className="bubble" ref={pointRef}>{data.id}</span>)
}

const App = () => {
    const [count, setCount] = useState(0)
  const [bubbles, setBubbles] = useState([])

    const handleCreate = () => {
    setBubbles([...bubbles, {id: count}])
    setCount(count + 1)
  }

  const handleClose = index => {
    const newBubbles = [...bubbles]
    newBubbles.splice(index, 1)
    setBubbles(newBubbles)
  }

  return (
    <div className="wrap">
      {
        bubbles.map((item, index) => (
            <Bubble
            key={item.id}
            data={item}
            onClose={() => handleClose(index)} />
        ))
      }
      <button type="button" onClick={handleCreate}>Click Me</button>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('app'))

1 Ответ

5 голосов
/ 18 марта 2020

Не уверен, что это сильно поможет, но я переместил ваш код в песочницу, потому что не смог найти консоль в jsfiddle и сделал небольшое изменение в коде:

https://codesandbox.io/s/react-and-gsap-issue-7tkrd

Основные изменения:

Изменить реализацию handleClose на простой фильтр: 

const handleClose = id => () => {
    setBubbles(prev => prev.filter(bubble => bubble.id !== id));
  };

Изменен способ его вызова (и рендеринга в целом): 

return (
    <div className="wrap">
      {bubbles.map(item => (
        <Bubble key={item.id} data={item} onClose={handleClose(item.id)} />
      ))}
      <button type="button" onClick={handleCreate}>
        Click Me
      </button>
    </div>
  );

Это исправило проблему, если я правильно понял вашу проблему, и я думаю, что проблема заключалась в том, как вы использовали соединение. Надеюсь, что это поможет.

...