javascript 用于react-stripe-gsap教程的图标容器。在Transition组件中包含图标

Posted 2021-05-04

import {Transition} from 'react-transition-group';
import React from 'react';
import animations from './animations';
import Icon from './Icon';
import {APPEAR_TIME} from '../constants';

const IconContainer = ({iconEntered, scale, startingPos,...props}) => (
    <Transition
        // When it first mounts 
        onEnter={(el) => {animations.show(el, scale, startingPos)}}
        // When onEnter has completed, this triggers a callback that handles the
        // starting of the main timeline
        onEntered={iconEntered}
        onExit={animations.hide}
        appear
        in
        // timeout prop is in ms, GSAP delays are in seconds
        timeout={APPEAR_TIME * 1000}
    >
        <Icon {...props} startingPos={startingPos}/>
    </Transition>
);

export default IconContainer;