使用相同 class 使用补间触发多个元素

Question

我将为此使用多个 svg 行，并且基本上需要此代码才能对 5 个 svg 行使用相同的触发器 class。只是不确定我会怎么做。任何帮助，将不胜感激。希望这是有道理的..

<div id="trigger1"></div>
  <svg height="550" width="500">
  <line class="draw" x1="0" y1="0" x2="0" y2="100%" 
   style="stroke:rgb(128,128,128);stroke-width:2" />
</svg>

function pathPrepare ($el) {
    var lineLength = $el[0].getTotalLength();
    $el.css("stroke-dasharray", lineLength);
    $el.css("stroke-dashoffset", lineLength);
}

var $draw = $("line.draw");

// prepare SVG
pathPrepare($draw);
// build tween
var tween = new TimelineMax()
    .add(TweenMax.to($draw, 0.9, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw word for 0.9


// build scene
var scene = new ScrollMagic.Scene({triggerElement: '#trigger1', duration: 500, tweenChanges: true})
                .setTween(tween)
                .addIndicators() 
                .addTo(controller);

Answer 1

如果您只想删除重复项，您可以这样做

$(".trigger").each(function(){      
    var $draw = $(this).find("line.draw");
    pathPrepare($draw); 
    // build tween
var tween = new TimelineMax()
    .add(TweenMax.to($draw, 0.9, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw word for 0.9

    new ScrollMagic.Scene({triggerElement: $(this)[0], duration: 500, tweenChanges: true})
                .setTween(tween)
                .addIndicators() 
                .addTo(controller);

})

假设我有这样的标记

<div id="trigger1" class="trigger">

    <svg height="550" width="500">
  <line class="draw" x1="0" y1="0" x2="0" y2="100%" 
   style="stroke:rgb(128,128,128);stroke-width:2" />
</svg>

</div>

<div id="trigger2" class="trigger">

    <svg height="550" width="500">
  <line class="draw" x1="0" y1="0" x2="0" y2="100%" 
   style="stroke:rgb(128,128,128);stroke-width:2" />
</svg>

</div>
<div id="trigger3" class="trigger">

    <svg height="550" width="500">
  <line class="draw" x1="0" y1="0" x2="0" y2="100%" 
   style="stroke:rgb(128,128,128);stroke-width:2" />
</svg>

</div>

希望这对您有所帮助。但是如果你想控制线的方向，你只能在一定程度上这样，那么你可能需要根据触发器部分编辑pathPrepare函数。

https://codepen.io/srajagop/pen/GaZbrW?editors=0010

使用相同 class 使用补间触发多个元素

trigger multiple elements using tween using same class

javascript

animation

scrollmagic