你可以使用ReactTransitionGroup来动画你的div元素的高度：

import { CSSTransition } from 'react-transition-group';
    // ...
    
    <CSSTransition
      in={venue}
      timeout={1000}
      classNames="venue-details"
    >
      <div className="venue-details">
        {venue ? (
          <>
            <span>Date: &nbsp;To Be Announced... </span><br />
            <span>Location: &nbsp; My Location</span><br />
          </>
        ) : (
          <>
            <span>Click to view</span>
          </>
        )}
      </div>
    </CSSTransition>

css：

.venue-details-enter {
  height: 0;
}

.venue-details-enter-active {
  height: [desired-height];
  transition: height 1s ease-in-out;
}

.venue-details-exit {
  height: [desired-height];
}

.venue-details-exit-active {
  height: 0;
  transition: height 1s ease-in-out;
}

问题是你在dom中添加/删除你的span，而不是改变它们上的类。试试类似这样的东西：

<div className={venueDisplayClass} >
   <p className="withVenue">
        Date: TBA
   </p>
   <p className="withVenue">Location: TBA</p>
   <button className="withoutVenue" onClick={setVenueDisplayClass('showVenue')}>Click to View</button>
</div>

然后你的css可以更像

.showVenue .withVenue {
   height: auto;
   transition: /* your transition */
}
.showVenue .withoutVenue {
  height: 0;
  transition: /* your transition */
}

.hideVenue .withVenue {
   height: 0;
}

.hideVenue .withoutVenue {
   height: auto;
}