滚动魔术。向一个元素添加多个类

Question

如果我遵循 scrollMagic 说明：

// add multiple classes to multiple elements defined by the selector '.classChange'
scene.setClassToggle(".classChange", "class1 class2 class3");

(http://scrollmagic.io/docs/ScrollMagic.Scene.html#setClassToggle)

我在控制台中收到此错误：

InvalidCharacterError: String contains an invalid character

因为 spaces 在 classes 之间。

我的整个场景代码是：

              var ourScene = new ScrollMagic.Scene({
                triggerElement: '.banner',
                triggerHook: 0,
                offset: 20
              })
              .setClassToggle('.banner', 'big small')
              .addTo(controller);

删除 "big small" 之间的 space 有效，换句话说，它只适用于一个 class，而不是多个 class。

如何使用多个 classes？

Answer 1

编辑：据报道这不起作用，所以请不要浪费时间尝试它。

~~你试过了吗：~~

~~... .setClassToggle('.banner', 'big') .setClassToggle('.banner', 'small') ...~~

Answer 2

在网上搜索时，我发现 scrollmagic 存在一个未解决的问题，导致您遇到问题

setClassToggle only supports single classes #313

要解决此问题，您可以使用 Greenstock .set tween 方法添加多个类。

下面是我在网上找到的解决上述用法的代码笔 link。

var setMultipleClasses = TweenMax.set($('p'), {
    className: "red bold"
});

// Create a ScrollMagic Scene
new ScrollMagic.Scene({
  triggerElement: "p"
})
.setTween(setMultipleClasses)
.addIndicators()
.addTo(ctrl);

http://codepen.io/ihatetomatoes/pen/9e18df235da9abb2766a61990094a368

Answer 3

上述答案的问题是 TweenMax.set() 会删除那里的任何其他类。

从技术上讲，您可以使用

添加更多类

className: "+= red bold"

但它似乎并没有关闭这些类。

我发现的最佳方法是使用回调函数。

// Create a ScrollMagic Scene
    new ScrollMagic.Scene({
      triggerElement: "p",
      triggerHook: 'onEnter'
    }).on('enter leave', function () {
        element.classList.toggle('toggle-on'); 
          element.classList.toggle('active');
      }).addTo(scrollMagicController)

在这里查看您可以使用的事件 https://scrollmagic.io/docs/ScrollMagic.Scene.html#on

滚动魔术。向一个元素添加多个类

ScrollMagic. Adding multiple classes to an element

javascript

jquery

scrollmagic

滚动魔术。向一个元素添加多个 类

ScrollMagic. Adding multiple classes to an element

javascript

jquery

scrollmagic

滚动魔术。向一个元素添加多个类