Элементы текста, мерцающие при перекосе анимации преобразования - PullRequest
Новая
       12

Элементы текста, мерцающие при перекосе анимации преобразования

0 голосов
/ 31 марта 2019

У меня есть некоторые анимации на моем сайте, где слушатель события javascript при нажатии клавиши для клавиши со стрелкой вниз заставляет некоторый div (который уже имеет класс scss, содержащий параметры для позиции и перекоса преобразования div), удалить свой предыдущийКласс и адаптировать другой класс, который содержит различные значения положения и различные значения перекоса с переходом, установленным на самом элементе div из-за пределов классов, чтобы создать иллюзию анимации.Однако, когда я активирую анимацию, текст на остальной части сайта делает странную вещь, где текст уменьшается.Это сложно объяснить, но это очень легко заметить.Здесь:

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

Текст до анимации

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

Текст во время анимации

JavaScriptПрослушиватель событий, который активирует анимацию, настраивается в свойстве окна, а не в любом 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;
        }
    }

Можно ли каким-то образом заставить эти элементы искажаться в анимации без волнения текста?

...