css - 如何使用css制作滑块水平移动的动画并做出反应？

Question

我正在用 css 制作一个滑块并做出反应

我有两个状态来显示一个类根据按下的按钮向左或向右移动内容

当我给下一个时，它会前进我想要的位置，但是在第二次单击时，它会返回到原始位置而不是前进

我怎么能继续前进

除此之外，当我放置在第二类但相反的运动时，它们似乎相互抵消，只有一个有效。

我怎样才能阻止这种情况发生？

我给你留下部分代码

 const [next, setNext] = useState(true);
 const [prev, setPrev] = useState(false)
 const nextSlide = () => setNext(!next)
 const previouSide = () => setPrev(!prev)
 <>
      <BlogHearder>
        <div className='featues-header'>
          <h2 className='features-title'>Visit Our Blog</h2>
          <div className='feature-arrows'>
            <button className='feature-icon icon-left' onClick={previouSide}>
              <FiChevronLeft className='icon' />
            </button>
            <button className='feature-icon icon-right' onClick={nextSlide}>
              <FiChevronRight className='icon' />
            </button>
          </div>
        </div>
      </BlogHearder>
      <BlogCardWrapper ref={ref} >
        <div className={next ? 'blog-slider next' : 'blog-slider', prev? 'blog-slider' : 'blog-slider prev'  }>
          {state.map(blog => (
            <BlogCard key={blog.id} blog={blog} />
          ))}
        </div>
      </BlogCardWrapper>
     
    </>

我正在使用样式化组件

BlogCardWrapper = styled.div`
  width: 100%;
  display: flex;
  justify-content: flex-start;
  overflow: hidden;
  .next{ 
    transform:translateX(-19%)
  }
  .prev{
    transform: translateX(19%);
  }
  .blog-slider {
    width: 250%;
    display: flex;
    justify-content: space-between;
    flex-shrink: 0;
    transition: all 0.5s;
  }
`

对于向右水平移动类 .next 和向左 .prev

19% 是我的滑块卡的大小

提前感谢任何可以帮助我的人

标签： cssreactjsanimationslider