Question

我想创建删除项目的动态动画，但这不能正常工作。两个包装器移动，我只想要一个。我通过map函数生成它们。所以，

data.map(item=><BasketItem data={item}/>)

但是当我单击按钮2时，包装纸正在移动。这是我的组件。从我的状态来看，点击是一项功能，对这个问题并不重要。

import React, {useState} from 'react';
import {Wrapper }  from './BasketItemStyled';

const BasketItem = ({data , click , update , className}) => {
  const [del , setDel]=useState(false);
  
  

 
    return (
        <Wrapper className={className} del={del}>
       
        <Btn onClick={()=>{
        setDel(true)
        return setTimeout(
          ()=>click(data) 
          , 500)}}> Usuń</Btn>
      </Wrapper>
     );
}

这是该组件的样式。我只粘贴了包装器样式，因为只有他有动画。

    export const Wrapper = styled.div`
@keyframes deleteAnimation{
    from{
    transform:translateX(0);
}
to{
    transform:translateX(-150%);
    display:none;
}
};

${({del})=>del===true?`animation: deleteAnimation .2s ease-in-out both;` : ``};

width:95%;
background: ${({theme})=>theme.gradients.pink};
display:flex;
margin:10px auto;
justify-content:space-between;
align-items:flex-start;
flex-direction:column;
padding: 10px 0;
border-radius:10px;

`;

为什么动画在两个包装上起作用？样式化的组件反应

0 个答案: