jquery - 尝试将 staggerTo 与 GSAP 一起使用

Question

试图让我的图像从底部开始:0 和不透明度 1 并错开使用 greensock 动画。我不确定我做错了什么，因为我的代码看起来很有效，也许我已经盯着它看太久了。

我假设 find() 没有按照我想要的方式工作，因为我没有看到其中包含所有 img 元素的对象。

这是我的控制台输出的内容:

[prevObject: jQuery.fn.init[0], context: document]

这是我的脚本:

  $(document).ready(function(){
    var mainText = $('ul.images li').find('img');
    console.log(mainText);
    var tween = TweenMax.staggerTo(mainText, 0.75, {
        opacity: '0',
        bottom: '300px',
        left: '50%'
    }, 0.3);
});

这是我的 html:

    <ul class="images">
        <li class="image brain"><img src="img/science/brain.svg" class="img brain" alt="cell-watermark-bg"></li>
        <li class="image mitochondria"><img src="img/science/mitochondria.svg" class="img mitochondria" alt="cell-watermark-bg"></li>
        <li class="image microscope"><img src="img/science/microscope.svg" class="img microscope" alt="cell-watermark-bg"></li>
        <li class="image scientist"><img src="img/science/scientist.svg" class="img scientist" alt="cell-watermark-bg"></li>
        <li class="image beaker"><img src="img/science/beaker.svg" class="img beaker" alt="cell-watermark-bg"></li>
        <li class="image beaker-2"><img src="img/science/beaker-2.svg" class="img beaker-2" alt="cell-watermark-bg"></li>
        <li class="image atom"><img src="img/science/atom.svg" class="img atom" alt="cell-watermark-bg"></li>
        <li class="image dropper"><img src="img/science/dropper.svg" class="img dropper" alt="cell-watermark-bg"></li>
        <li class="image dna"><img src="img/science/dna.svg" class="img dna" alt="cell-watermark-bg"></li>
    </ul>

这是我的 CSS(scss):

    ul.images {
        position: relative;
        .image {
            position: relative;
            width: 100%;
            .img {
                position: absolute;
                height: 50px;
                opacity: 1;
                -webkit-transition: background-color 0.2s ease;
                -moz-transition: background-color 0.2s ease;
                -o-transition: background-color 0.2s ease;
                transition: background-color 0.2s ease;
                &.dna {
                    bottom: -40px;
                    left: -30%;
                }
                &.scientist {
                    bottom: 40px;
                    left: -40%;
                }
                &.atom {
                    bottom: -60px;
                    left: 60%;
                }
                &.cell {
                    bottom: -90px;
                    left: -96px;
                }
                &.brain {
                    bottom: -130px;
                    left: 250px;
                }
                &.dropper {
                    bottom: -120px;
                    left: -20%;
                }
                &.beaker {
                    bottom: -60px;
                    left: 15%;
                }
                &.beaker-2 {
                    bottom: -100px;
                    left: 100%;
                }
                &.mitochondria {
                    bottom: -40px;
                    left: 120%;
                }
                &.microscope {
                    bottom: 45px;
                    left: 110%;
                }
            }
        }

Answer 1

问题出在你的 scss 上。 ul.images{...} 实际上并未关闭。我已将其关闭，根据我的理解您的问题，动画似乎可以正常工作。

Codepen here

注意:我已将您的 js 包装到一秒超时中，因此您可以在动画触发之前看到元素放置在舞台上。

有点奇怪，你的 sass 编译器没有对你大喊说出了什么问题。