множественный переход не работает с SCSS - PullRequest
Новая
       6

множественный переход не работает с SCSS

0 голосов
/ 03 апреля 2020

Я тестировал гамбургерную анимацию в обычном режиме css, и она работала там. Итак, я хотел бы интегрировать код в мой файл css. Но в s css анимация больше не работает. Я не понимаю, почему.

Здесь вы можете увидеть неправильную анимацию в действии: https://www.youtube.com/watch?v=iOWnM5fq7_k&feature=youtu.be

Я думаю, что ошибка где-то со свойством перехода?

В

.toggle.active .span: before &: after

строки гамбургера вращаются правильно, но не движутся сверху 8px и От -8px до 0.

Спасибо за любую помощь и ответ!

Здесь код в файле html / php. Php потому что я делаю сайт мультиязычным. Может ли php повлиять на это? Но я не вижу причины, по которой это должно быть проблемой. 

        <nav class="nav">
            <div class="nav-container">
                <img src="img/Logo.png">
                <div class="toggle-container">
                    <div class="toggle">
                        <div class="span-container">
                            <span class="span"></span>
                        </div>
                    </div>
                </div>
            </div>
        </nav>

Здесь код в S CSS: 

.nav {
    background: #152237;
    position: fixed;
    width: 100%;
    z-index: 10;

    .nav-container {
        max-width: 1440px;
        width: 90%;
        margin: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;

        align-items: center;
        height: 90px;

        img {
            height: 50px;
        }

        .toggle-container {
            display: grid;
            justify-items: end;

            .toggle {
                max-width: 40px;
                height: 40px;
                cursor: pointer;
                text-align: center;

                .span-container {
                    display: grid;
                    align-items: center;
                    height: 100%;
                }
            }
        }
    }
}

S CSS тоже: 

.toggle .span {
    position: relative;
    width: 32px;
    height: 2px;
    background: white;
    display: inline-block;
    border-radius: 4px;
    transition: 0.1s;
    transition-delay: 0.5s;
}

.toggle .span:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    display: block;
    top: -8px;
    left: 0;
    border-radius: 4px;
    transition-property: top, transform;
    transition-delay: 0.5s, 0s;
    transition-duration: 0.5s, 0.5s;
}

.toggle .span:after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: white;
    top: 8px;
    left: 0;
    border-radius: 4px;
    transition-property: top, transform;
    transition-delay: 0.5s, 0s;
    transition-duration: 0.5s, 0.5s;
}

.toggle.active .span:before {
    top: 0px;
    transform: rotate(45deg);
    transition-delay: 0s, 0.5s;
}

.toggle.active .span:after {
    top: 0px;
    transform: rotate(-45deg);
    transition-delay: 0s, 0.5s;
}

.toggle.active .span {
    background: transparent;
}

jQuery: 

$(document).ready(function(){
    $('.toggle').click(function(){
        $('.toggle').toggleClass('active')
        $('.sidebar').toggleClass('active')
    })
})
...