Невозможно анимировать демонтирование элемента с помощью любой библиотеки - PullRequest
Новая
       84

Невозможно анимировать демонтирование элемента с помощью любой библиотеки

0 голосов
/ 14 июля 2020

У меня есть список элементов, и я хочу, чтобы удаление элемента было анимированным. Я перепробовал множество библиотек, включая Framer-motion и Transition Group, и ни одна из них не работает, если я использую данные из Redux. Но если я беру данные из состояния компонента - все работает как положено.

Родительский компонент: 

const Saved: FC<PropsTypes> = ({ requestSaved, articles, toggleArticle }) => {
  ...
  return (
    <motion.div className='Saved' variants={savedVariants} initial='hidden' animate='visible'>
      {articles && (
        <div className='Saved__cards'>
          <AnimatePresence>
            {articles.map((article) => (
              <SmallCard
                {...article}
                key={article.id}
                onDelete={(id) => toggleArticle(articles!.find((el) => el.id === id)!)}
                onClick={handleRead}
              />
            ))}
          </AnimatePresence>
        </div>
      )}
    </motion.div>
  )
}

const mapStateToProps = (state: RootState): MapStateTypes => ({...})

const mapDispatchToProps: MapDispatchTypes = {
  requestSaved,
  toggleArticle,
}

export default connect<MapStateTypes, MapDispatchTypes, {}, RootState>(
  mapStateToProps,
  mapDispatchToProps
)(Saved)

Вложенный компонент: 

const SmallCard: FC<CardProps> = ({ urlToImage, title, id, onClick, onDelete }) => {
  return (
    <motion.div variants={variants} initial='hidden' exit='exit'  whileHover={{ y: -2 }} className='SmallCard'>
      <button className='SmallCard__btn' onClick={() => onDelete(id)}>
        <i className='fas fa-times' />
      </button>
      <div className='SmallCard__info' onClick={() => onClick(id)}>
        <img src={validateImgSrc(urlToImage)} alt='Article' className='SmallCard__image' />
        <span className='SmallCard__title'>{title.replace(/-\s.*/, '')}</span>
      </div>
    </motion.div>
  )
}

Действие создатель: 

export const toggleArticle = (article: Article, refreshFeed?: boolean): ThunkAsync => async (
  dispatch,
  getState
) => {
  const userId = getState().profile.userId
  const feedAritcles = getState().articles.articles
  const savedArticles = getState().articles.saved
  let articles = [article]

  if (savedArticles) {
    const isSaved = savedArticles.find((item) => item.id === article.id)
    if (isSaved) {
      articles = savedArticles.filter((el) => el.id !== article.id)
    } else {
      articles = [article, ...savedArticles]
    }
  }

  dispatch(setSaved(articles))

  try {
    await axios.patch('/users.json', createUserdata(userId!, articles))
    if (refreshFeed === false) return
    feedAritcles &&
      dispatch(
        setArticles(
          feedAritcles.map((el) => {
            return el.id === article.id ? { ...el, isSaved: !el.isSaved } : el
          })
        )
      )
  } catch (e) {
    console.log(e)
  }
}
...