我如何在ReactJS中进行过渡

如何解决我如何在ReactJS中进行过渡

我正在尝试在ReactJs中应用过渡，但是不幸的是，这没有用。有人可以帮我吗，我以前没有与过渡结合React工作的经验。我希望当用户将鼠标悬停在购物车按钮上时，内容将显示1s过渡，然后当鼠标离开时，内容将消失

代码在下面

import React,{ useEffect,useState } from 'react';
import { Link } from 'react-router-dom';
import { useSelector,connect } from 'react-redux';
import { signOut,signIn } from '../actions';
import Search from './Search';

const styles = {
 transition: 'all 1s ease',};

function Header({ signOut,signIn }) {
 const state = useSelector((state) => state.auth.isSignedIn);
 const cartNumber = useSelector((state) => state.cartReducer);

 const [opacity,setopacity] = useState(0);

 const calculateCart = () => {
   return cartNumber.map((item) => {
     return item.quantity;
   });
 };

 const calculate = () => {
   let result = cartNumber.map((item) => item.price * item.quantity);
   return result.reduce((a,b) => a + b,0);
 };

 const sum = calculateCart().reduce((a,0);

 useEffect(() => {
   window.gapi.load('client:auth2',() => {
     window.gapi.client
       .init({
         clientId:
           '120049196299-t4dllqtg6ck2f7gat6i01eufsh1ocie3.apps.googleusercontent.com',scope: 'email',})
       .then(() => {
         var auth = window.gapi.auth2.getAuthInstance();

         const onAuthChange = (isSignedIn) => {
           if (isSignedIn) {
             signIn();
           } else {
             signOut();
           }
         };

         onAuthChange(auth.isSignedIn.get());

         auth.isSignedIn.listen(onAuthChange);
       });
   });
 },[]);

 const onSignOut = () => {
   window.gapi.auth2.getAuthInstance().signOut();
 };

 const renderLogin = () => {
   if (state === false) {
     return (
       <Link to="/login">
         <i className="fa fa-lock"></i> Login
       </Link>
     );
   } else if (state === null) {
     return <div>Loading...</div>;
   } else {
     return (
       <Link to="/login" onClick={() => onSignOut()}>
         <i class="fas fa-sign-out-alt"></i> logout
       </Link>
     );
   }
 };

 return (
   <header id="header">
     <div className="header_top">
       <div className="container">
         <div className="row">
           <div className="col-sm-6">
             <div className="contactinfo">
               <ul className="nav nav-pills">
                 <li>
                   <a href="#">
                     <i className="fa fa-phone"></i> [phone]
                   </a>
                 </li>
                 <li>
                   <a href="#">
                     <i className="fa fa-envelope"></i> [e-mail]
                   </a>
                 </li>
               </ul>
             </div>
           </div>
           <div className="col-sm-6">
             <div className="social-icons pull-right">
               <ul className="nav navbar-nav">
                 <li>
                   <a href="#">
                     <i className="fa fa-facebook"></i>
                   </a>
                 </li>
                 <li>
                   <a href="#">
                     <i className="fa fa-twitter"></i>
                   </a>
                 </li>
                 <li>
                   <a href="#">
                     <i className="fa fa-linkedin"></i>
                   </a>
                 </li>
                 <li>
                   <a href="#">
                     <i className="fa fa-dribbble"></i>
                   </a>
                 </li>
                 <li>
                   <a href="#">
                     <i className="fa fa-google-plus"></i>
                   </a>
                 </li>
               </ul>
             </div>
           </div>
         </div>
       </div>
     </div>

     <div className="header-middle">
       <div className="container">
         <div className="row">
           <div className="col-sm-4">
             <div className="logo pull-left">
               <Link to="/">
                 <img src="images/home/logo.png" alt="" />
               </Link>
             </div>
             <div className="btn-group pull-right">
               <div className="btn-group"></div>
             </div>
           </div>
           <div className="col-sm-8">
             <div className="shop-menu pull-right">
               <ul className="nav navbar-nav">
                 <li>
                   <Link to="/compare">
                     <i className="fa fa-user"></i> Compare
                   </Link>
                 </li>
                 <li>
                   <Link to="/wishlist">
                     <i className="fa fa-star"></i> Wishlist
                   </Link>
                 </li>
                 <li>
                   <Link
                     to="/cart"
                     onMouseEnter={() => setopacity(1)}
                     onMouseLeave={() => setopacity(0)}
                   >
                     <i className="fa fa-shopping-cart"></i> Cart
                     <span className="cart-number">
                       {cartNumber !== undefined ? sum : 0}
                     </span>
                   </Link>
                 </li>
                 <li>{renderLogin()}</li>
               </ul>
             </div>
           </div>
         </div>
         {opacity === 1 && (
           <div
             class="shopping-cart"
             style={{ transition: 'all 2s ease',opacity: opacity }}
           >
             <div class="shopping-cart-header">
               <i class="fa fa-shopping-cart cart-icon"></i>
               <span class="badge">{sum}</span>
               <div class="shopping-cart-total">
                 <span class="lighter-text">Total:</span>
                 <span class="main-color-text"> {calculate()} kr</span>
               </div>
             </div>
             <ul class="shopping-cart-items">
               {cartNumber !== undefined
                 ? cartNumber.map((item) => {
                     return (
                       <li class="clearfix">
                         <img
                           src={item.imgSrc}
                           style={{ width: '30%' }}
                           alt="item1"
                         />
                         <span
                           class="item-name"
                           style={{ verticalAlign: 'middle' }}
                         >
                           {item.name}
                         </span>
                         <span
                           class="item-price"
                           style={{ verticalAlign: 'middle' }}
                         >
                           {item.price} kr
                         </span>
                         <span
                           class="item-quantity"
                           style={{ verticalAlign: 'middle' }}
                         >
                           Quantity: {item.quantity}
                         </span>
                       </li>
                     );
                   })
                 : null}
             </ul>
           </div>
         )}
       </div>
     </div>

     <div className="header-bottom">
       <div className="container">
         <div className="row">
           <div className="col-sm-9">
             <div className="navbar-header">
               <button
                 type="button"
                 className="navbar-toggle"
                 data-toggle="collapse"
                 data-target=".navbar-collapse"
               >
                 <span className="sr-only">Toggle navigation</span>
                 <span className="icon-bar"></span>
                 <span className="icon-bar"></span>
                 <span className="icon-bar"></span>
               </button>
             </div>
             <div className="mainmenu pull-left">
               <ul className="nav navbar-nav collapse navbar-collapse">
                 <li>
                   <Link to="/" className="active">
                     Home
                   </Link>
                 </li>
               </ul>
             </div>
           </div>
           <Search />
         </div>
       </div>
     </div>
   </header>
 );
}

export default connect(null,{ signOut,signIn })(Header);