Question

我正在建立在线商店，每当有人单击“添加到购物车”按钮时，我都希望为购物车徽标设置动画。

“添加到购物车”按钮是收集项组件的一部分，而购物车图标是标题内的其他组件。它们没有相互连接。

我有css动画，但是我需要在不同组件之间进行连接的帮助。

我正在添加相关组件的代码段：

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);

这怎么办？

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

先谢谢了。

Answer 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;
}

通过单击其他组件来对组件进行动画处理

1 个答案: