我的页面上没有应用 scale 属性 (anime.js)

问题描述

使用amine.js的时候，scale对我不起作用，理论上应该先拿文字 规模：0.5 后 字母间距：“10px” 并返回 规模：1 字母间距：“6px” 但只有字母间距工作 比例不会以任何方式显示在页面上

代码： html

<div class="text-animation">
            <div class="anime-el">
                <div class="animate-me">
                    studen<span class="acc">t</span>.league.ru
                </div>
                <div class="animate-me">
                    le<span class="acc">a</span>gue.student.ru
                </div>
                <div class="animate-me">
                    student.<span class="acc">l</span>eague.ru
                </div>
                <div class="animate-me">
                    league.stud<span class="acc">e</span>nt.ru
                </div>
                <div class="animate-me">
                    stude<span class="acc">n</span>t.league.ru
                </div>
                <div class="animate-me">
                    league.studen<span class="acc">t</span>.ru
                </div>
                <div class="animate-me">
                    student.lea<span class="acc">g</span>ue.ru
                </div>
                <div class="animate-me">
                    le<span class="acc">a</span>gue.student.ru
                </div>
                <div class="animate-me">
                    student.<span class="acc">l</span>eague.ru
                </div>
                <div class="animate-me">
                    l<span class="acc">e</span>ague.student.ru
                </div>
            </div>
        </div>

js

<script type="module">
        import Letterize from "https://cdn.skypack.dev/letterizejs@2.0.0";
            const test = new Letterize({
                targets: ".animate-me"
            });

            const animation = anime.timeline({
                targets: test.listAll,delay: anime.stagger(100,{
                    grid: [test.list[0].length,test.list.length],from: "center"
                }),loop: true
            });

            animation
                .add({
                    scale: 0.5
                })
                .add({
                    letterSpacing: "10px"
                })
                .add({
                    scale: 1
                })
                .add({
                    letterSpacing: "6px"
                });
    </script>

谢谢！

解决方法

Letterize.js 在字母周围注入跨度，跨度为 display: inline。

这是问题所在，因为变换属性仅适用于 display: inline-block 和 display: block 元素。

为了解决这个问题，我添加了一些 css，将注入的跨度设置为 inline-block

.animate-me span {
  display: inline-block;
}

在这里查看：https://codesandbox.io/s/sweet-river-hu17u?file=/index.html

有关无法转换内联元素的更多详细信息：https://stackoverflow.com/a/33305348/8239711