Question

我的网站上有一些动画，其中向下箭头键的keydown上的javascript事件侦听器导致某个div（该div已经具有包含div位置和变换偏斜参数的scss类），以删除其先前的并修改另一个包含不同位置值和不同偏斜值的类，并从这些类外部对div元素本身进行设置过渡，以产生动画效果。但是，当我激活动画时，网站其余部分上的文本在文本变细的地方做了一些奇怪的事情。很难解释，但很容易注意到。在这里：

https://i.imgur.com/cYG66WZ.jpg

动画之前的文本

https://i.imgur.com/HNgCieo.jpg

动画中的文字

激活动画的javascript事件监听器是在window属性上设置的，如果有帮助，则不会在任何div上设置。

我已经尝试使用关键帧来代替它，但是它不起作用，导致问题的原因是动画中使用了歪斜。消除转换偏斜可以解决此问题。这是所有职位类别的SCSS。

.compassGUI {
    width: 1080px;
    .menu {
        color: wheat;
        z-index: -1;
        height: 100%;
        position: absolute;
        padding-left: 10px;
        .menu-item-4 {
            top: 272px;
            left: 16px;
            height: 119px;
            transform: skew(0deg, 0deg);
        }
        .menu-item-5 {
            top: 394px;
            left: 40px;
            height:85px;
            transform: skew(22.47deg, 0deg);
            height: 109px;
        }
        .menu-item-6 {
            top: 506px;
            left: 105px;
            transform: skew(45deg, 0deg);
            height: 83px;
        }
        .menu-item-7 {
            top: 592px;
            left: 203px;
            transform: skew(67.54deg, 0deg);
            height: 44px;
        }
        .menu-item-3 {
            top: 159px;
            left: 40px;
            height:85px;
            transform: skew(-22.47deg, 0deg);
            height: 109px;
        }
        .menu-item-2 {
            top: 73px;
            left: 105px;
            transform: skew(-45deg, 0deg);
            height: 83px;
        }
        .menu-item-1 {
            top: 26px;
            left: 203px;
            transform: skew(-67.54deg, 0deg);
            height: 44px;
        }
    }

有什么办法可以使这些项目在动画中倾斜而不会使文本失真吗？

文本元素在变形偏斜动画上闪烁

0 个答案: