Question

我正在尝试使用Christine Cha的Choreorapher JS在我正在设计/开发的网站上滚动动画。我想旋转一个字母，但我写的这段代码不起作用。其他动画（此刻只是不透明度的变化）工作得很好，但任何以“变换”开头的东西都没有做任何事情。我查看了文档网站，看看我做错了什么，但我的代码与Cha's看起来基本相同。

奇怪的是，当我在Dev Tools打开时滚动浏览网站时，看起来它应该正常工作 - 没有明显的语法错误，而Choreographer看起来正在做它应该做的事情。但没有发生任何事情。我还不能发布图像，but here's a gif（我在录制之前稍早停止了录制，但它按照预期停在了90度。）

这是我的相关代码。任何帮助，将不胜感激！谢谢！

let choreographer = new Choreographer({
    animations: [

        //rotate letter — this is the one that doesn't work
        { range: [50, 150], selector: '.char1', type: 'scale', style: 'transform:rotateZ', from: 0, to: 90, unit: 'deg' },

        // scroll — this and below are fine
        { range: [-1, 150], selector: '#scroll-down', type: 'scale', style: 'opacity', from: 1, to: 0},

        // fade in fixed elements/header
        { range: [150, 250], selector: 'header', type: 'scale', style: 'opacity', from: 0, to: 1},
        { range: [150, 250], selector: '#burger-container', type: 'scale', style: 'opacity', from: 0, to: 1},
        { range: [150, 250], selector: '#bottom-right', type: 'scale', style: 'opacity', from: 0, to: 1}
    ]
})

window.addEventListener('scroll', () => {
    choreographer.runAnimationsAt(window.pageYOffset)
})

HTML：

<section id="splash">
    <h1 class="title" aria-label="boy detectives">
        <span class="char1" aria-hidden="true">b</span>
        <span class="char2" aria-hidden="true">o</span>
        <span class="char3" aria-hidden="true">y</span>
        <span class="char4" aria-hidden="true"> </span>
        <span class="char5" aria-hidden="true">d</span>
        <span class="char6" aria-hidden="true">e</span>
        <span class="char7" aria-hidden="true">t</span>
        <span class="char8" aria-hidden="true">e</span>
        <span class="char9" aria-hidden="true">c</span>
        <span class="char10" aria-hidden="true">t</span>
        <span class="char11" aria-hidden="true">i</span>
        <span class="char12" aria-hidden="true">v</span>
        <span class="char13" aria-hidden="true">e</span>
        <span class="char14" aria-hidden="true">s</span>
    </h1>
</section>

Answer 1

检查器中的代码表示您正在转换rotateX属性，但您的Javascript说transform:rotateZ。也许只是一个复制+粘贴错误。

另一件事是您无法转换不是display: block或display: inline-block的元素。 <spans>为inline，因此您必须为这些元素添加额外的CSS规则。

#splash span { 
  display: inline-block;
}

如何在Choreographer JS中使用转换CSS属性？

1 个答案: