Question

尝试让我的图像从底部开始：0和不透明度1并且使用绿色摇滚动画错开。我不确定我做错了什么，因为我的代码看起来很有价值，也许我已经盯着它看了太长时间。

我假设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编译器并没有大声喊你说有什么问题。

试图与GSAP一起使用staggerTo

1 个答案: