Question

我需要帮助为引导程序4中的卡片制作动画。

我有4个卡盒，如下图所示，这是一个简单的引导4卡座，其中有4个卡盒。

每当用户滚动到此部分时，我都会尝试从右开始逐个滑动每个框。如何实现？

我不是要制作滑块/轮播。

作为参考，请检查此codepen

每个需要从右边送入4个盒子。在代码库中，所有这些立即全部来自左侧。当用户滚动到该部分时，我需要一个接一个地添加它。

这是我正在使用的boostrap 4卡的代码

class CategorySlider extends Component {
constructor(props) {
    super(props);
}

next() {
    this.slider.slickNext();
}
previous() {
    this.slider.slickPrev();
}
render() {
    const categorySlide = (slide,markNotRequired) =>
    (
        <Dropdown
            trigger={trigger}
            icon={null}
            >
            <Dropdown.Menu>
                <Dropdown.Item text="Not required" onClick={() => { this.next(); }}/>
                <Dropdown.Item text="Done" />
            </Dropdown.Menu>
            </Dropdown>
    );

    const settings = {
    prevArrow: <PrevArrow />,
    nextArrow: <NextArrow />,
    slidesToShow: 1,
    slidesToScroll: 1,
    easing: 'linear'
    };

    return (
        <div>
        <Slider ref={slider => (this.slider = slider)} {...settings}>
            {
            _.map(_.filter(_.values(this.props.slidesVM.slides), slide => slide.isRequired), (slide,markNotRequired) => categorySlide(slide, this.props.markNotRequired))
            }
        </Slider>
        </div >
    )}

}

Answer 1

您是否尝试过此插件aosjs？要设置动画，只需将特定元素与有效的aos属性绑定（请参阅下文）

<div data-aos="fade-up"></div>

如果要对其设置动画一次，则可以添加data-aos-once属性

<div data-aos="fade-up" data-aos-once="true"></div>

以此类推，请在此处http://michalsnik.github.io/aos/

检查插件

更新：要使每个元素在不同的持续时间上显示，您可以添加data-aos-delay

<div id="animate1" data-aos="fade-up" data-aos-once="true" data-aos-delay="500"></div>
<div id="animate2" data-aos="fade-up" data-aos-once="true" data-aos-delay="1000"></div>
<div id="animate3" data-aos="fade-up" data-aos-once="true" data-aos-delay="1500"></div>

从上面的示例中可以看到，每个元素都有500ms的延迟。

注意：请确保您首先初始化插件

<script>
    AOS.init();
</script>

Answer 2

已编辑-问题详细信息更改后

根据 @Juliver Galleto 的建议，您可以使用 plugin aosjs

https://github.com/michalsnik/aos

下面是我的运行代码段

AOS.init({
  duration: 1200,
})

* {
  box-sizing: border-box;
}

.item {
  width: 100px;
  height: 200px;
  margin: 50px auto;
  padding-top: 75px;
  background: #ccc;
  text-align: center;
  color: #FFF;
  font-size: 3em;
}

   

 <!DOCTYPE html>
    <html lang="en" >

    <head>
      <meta charset="UTF-8">
      <title>AOS - animations</title>
      
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

      <link rel='stylesheet prefetch' href='https://unpkg.com/aos@2.3.0/dist/aos.css'>

          <link rel="stylesheet" href="css/style.css">

      
    </head>

    <body>


    <div style="width=1200px;">
    <div style="float:left;" data-aos-delay="100" class="item" data-aos="fade-left">1</div>
    <div  style="float:left;" data-aos-delay="1600" class="item" data-aos="fade-left">2</div>
    <div  style="float:left;" data-aos-delay="2800" class="item" data-aos="fade-left">3</div>
    </div>
      <script src='https://unpkg.com/aos@2.3.0/dist/aos.js'></script>

</body>

</html>

旧帖子

此功能可作为轮播

在引导程序中使用

示例：https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_carousel

关于轮播： https://getbootstrap.com/docs/4.0/components/carousel/

如何一张一张地给Bootstrap 4卡制作动画？

2 个答案: