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

因为类之间的空格。

我的整个场景代码是：

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

删除＆＃34; big small＆＃34;之间的空间，它可以工作，换句话说，它只适用于一个类，而不是多个类。

我如何使用多个班级？

Answer 1

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

setClassToggle仅支持单个类＃313

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

以下是我在网上找到的代码链接，解决了上述问题。

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 2

编辑：据说这不起作用，所以请不要浪费你的时间去尝试。

~~您尝试过：~~

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

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。向元素添加多个类

3 个答案: