通过单击不同的组件为组件设置动画答案

【问题标题】：Animate component by clicking a different component通过单击不同的组件为组件设置动画
【发布时间】：2020-02-26 13:32:56
【问题描述】：

我正在建立一个在线商店，我想在有人点击添加到购物车按钮时为购物车徽标设置动画。

添加到购物车按钮是集合项目组件的一部分，而购物车图标是标题内的不同组件。它们没有相互连接。

我有 css 动画，但我需要帮助连接不同的组件。

我正在添加相关组件的代码sn-ps：

import React from "react";
import { connect } from "react-redux";
import { createStructuredSelector } from "reselect";

import { toggleCartHidden } from "../../redux/cart/cart.actions";
import { selectCartItemsCount } from "../../redux/cart/cart.selectors";

import {
  CartContainer,
  ShoppingIcon,
  ItemCountContainer
} from "./cart-icon.styles";

const CartIcon = ({ toggleCartHidden, itemCount }) => (
  <div className="hvr-buzz-out">
    <CartContainer onClick={toggleCartHidden}>
      <ShoppingIcon />
      <ItemCountContainer>{itemCount}</ItemCountContainer>
    </CartContainer>
  </div>
);

const mapDispatchToProps = dispatch => ({
  toggleCartHidden: () => dispatch(toggleCartHidden())
});

const mapStateToProps = createStructuredSelector({
  itemCount: selectCartItemsCount
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(CartIcon);

import React from 'react';
import { connect } from 'react-redux';

import { addItem } from '../../redux/cart/cart.actions';

import {
  CollectionItemContainer,
  CollectionFooterContainer,
  AddButton,
  BackgroundImage,
  NameContainer,
  PriceContainer
} from './collection-item.styles';

const CollectionItem = ({ item, addItem }) => {
  const { name, price, imageUrl } = item;

  return (
    <CollectionItemContainer>
      <BackgroundImage className='image' imageUrl={imageUrl} />
      <CollectionFooterContainer>
        <NameContainer>{name}</NameContainer>
        <PriceContainer>{price}&#8362;</PriceContainer>
      </CollectionFooterContainer>
      <AddButton onClick={() => addItem(item)} inverted>
        Add to cart
      </AddButton>
    </CollectionItemContainer>
  );
};

const mapDispatchToProps = dispatch => ({
  addItem: item => dispatch(addItem(item))
});

export default connect(
  null,
  mapDispatchToProps
)(CollectionItem);

如何做到这一点？

顺便说一句，容器只是样式化的组件。

提前致谢。

【问题讨论】：

redux store 是连接，当item count改变的时候才动画。
但是怎么做呢？更新商店时更改类名？
查看答案。我不知道这是否是最佳做法，但它以前对我有用。

标签： css reactjs css-animations

【解决方案1】：

你可以这样做：

someOtherClass 将在 itemCount 更改时添加，并在动画完成后删除。如果是关键帧动画，使用 onAnimationEnd 而不是 onTransitionEnd

import React, { useEffect, useState, useRef } from 'react';

...

export const CartIcon = ({ toggleCartHidden , itemCount }) => {
  const [animate, setAnimate] = useState(false);
  const isMounting = useRef(true);

  useEffect(() => {
    if (isMounting.current) { //No animation on initial mount
      isMounting.current = false; 
    } else {
      setAnimate(true); // Set animate to true
    }
  }, [itemCount]); //Only run useEffect if itemCount has changed

  const className = `hvr-buzz-out${animate ? ' classForAnimate' : ''}`
  return (
    <div className={className} onTransitionEnd={() => setAnimate(false)}>
      <CartContainer onClick={toggleCartHidden} >
        <ShoppingIcon />
        <ItemCountContainer>{itemCount}</ItemCountContainer>
      </CartContainer>
    </div>
  );
}

css 可能类似于

.hvr-buzz-outate {
  background-color: red;
  transition: all 1s ease-in;
}
.classForAnimate {
  background-color: blue;
}

【讨论】：