Sass анимационные миксины с использованием include

Я пытаюсь заставить демо-версию этого примера работать, но я не вижу никакой анимации. Я хочу максимально сжать миксины и использовать включения, чтобы попытаться сохранить эффективность анимации.

https://brandonbrule.github.io/scss-animation-keyframe-mixin/< /а>

моя скрипка http://jsfiddle.net/knum7po2/1/

// CSS
.animation-slide-in-up{
  @include animation(0, 0.5s, animation-slide-in-up, ease);
}

.animation-slide-in-down{
  @include animation(0, 0.5s, animation-slide-in-down, ease);
}

.animation-slide-in-right{
  @include animation(0, 0.5s, animation-slide-in-right, ease);
}

.animation-slide-in-left{
  @include animation(0, 0.5s, animation-slide-in-left, ease);
}

.animation-slide-out-up{
  @include animation(0, 0.5s, animation-slide-out-up, ease);
}

.animation-slide-out-down{
  @include animation(0, 0.5s, animation-slide-out-down, ease);
}

.animation-slide-out-right{
  @include animation(0, 0.5s, animation-slide-out-right, ease);
}

.animation-slide-out-left{
  @include animation(0, 0.5s, animation-slide-out-left, ease);
}


@mixin keyframe ($animation_name) {
    @-webkit-keyframes $animation_name {
        @content;
    }

    @-moz-keyframes $animation_name {
        @content;
    }

    @-o-keyframes $animation_name {
        @content;
    }

    @keyframes $animation_name {
        @content;
    }
}

@mixin animation ($delay, $duration, $animation, $direction: forward, $fillmode: fowards) {
    -webkit-animation-delay: $delay;
    -webkit-animation-duration: $duration;
    -webkit-animation-name: $animation;
    -webkit-animation-fill-mode: $fillmode;
    -webkit-animation-direction: $direction;

    -moz-animation-delay: $delay;
    -moz-animation-duration: $duration;
    -moz-animation-name: $animation;
    -moz-animation-fill-mode: $fillmode;
    -moz-animation-direction: $direction;

    animation-delay: $delay;
    animation-duration: $duration;
    animation-name: $animation;
    animation-fill-mode: $fillmode;
    animation-direction: $direction;
}




// -- Slide Animations -- //

// Slide Out Top from Center
@include keyframe(animation-slide-out-up) {
    0% {
        transform: translate(0,0);
    }

    100% {
        transform: translate(0,-100%);
    }
}

@include keyframe(animation-slide-out-down) {
    0% {
        transform: translate(0,0);
    }

    100% {
        transform: translate(0,100%);
    }
}

// Slide Out Left from Center
@include keyframe(animation-slide-out-left) {
    0% {
        transform: translate(0,0);
    }

    100% {
        transform: translate(-100%,0);
    }
}

// Slide out Right from Center
@include keyframe(animation-slide-out-right) {
    0% {
        transform: translate(0,0);
    }

    100% {
        transform: translate(100%,0);
    }
}

@include keyframe(animation-slide-in-up) {
    0% {
        transform: translate(0,100%);
    }

    100% {
        transform: translate(0,0);
    }
}

@include keyframe(animation-slide-in-down) {
    0% {
        transform: translate(0,-100%);
    }

    100% {
        transform: translate(0,0);
    }
}

// Slide in Left to Center
@include keyframe(animation-slide-in-left) {
    0% {
        transform: translate(-100%,0);
    }

    100% {
        transform: translate(0,0);
    }
}

// Slide in Right to Center
@include keyframe(animation-slide-in-right) {
    0% {
        transform: translate(100%,0);
    }

    100% {
        transform: translate(0,0);
    }
}
<div class="animation-slide-in-up">c</div>
<div class="animation-slide-in-down">x</div>
<div class="animation-slide-in-right">x</div>
<div class="animation-slide-in-left">x</div>

<div class="animation-slide-out-up">x</div>
<div class="animation-slide-out-down">x</div>
<div class="animation-slide-out-right">x</div>
<div class="animation-slide-out-left">x</div>


animation html css sass
person The Old County    schedule 14.12.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вот две причины, почему ваш sass не компилируется:

  • @mixin всегда на первом месте

В sass нет подъема, поэтому убедитесь, что вы всегда добавляете примеси и переменные, прежде чем ссылаться на них.

  • Если вы хотите использовать переменные в именах селекторов/свойств, вам необходимо использовать интерполяции (#{})

Изменять

@mixin keyframe ($animation_name) {
    @-webkit-keyframes $animation_name {
        @content;
    }
    
    // ...
}

to

@mixin keyframe ($animation_name) {
    @-webkit-keyframes #{$animation_name} {
        @content;
    }
    
    // ...
}

Вот фиксированная скрипка: http://jsfiddle.net/hscbfeox/

person Hao Wu    schedule 14.12.2020
comment
Я все еще не вижу, как что-то движется? - person The Old County; 14.12.2020
comment
Попробуйте нажать кнопку Run @TheOldCounty - person Hao Wu; 14.12.2020
comment
ах, он сдвинулся в начале - я просто думал, что смотрю страницу инициализации - person The Old County; 14.12.2020
comment
поднимает дерзость -- скажи мне больше -- почему это его материал не включает это? - person The Old County; 14.12.2020
comment
Поднятие примерно означает, что определения всегда находятся наверху, например поднятие в JavaScript вы можете обратиться к функции, прежде чем определить ее. Но в sass нет такой функции, поэтому вам нужно буквально вставить свой код определения, прежде чем ссылаться на них. Вот ответ, объясняющий это. - person Hao Wu; 14.12.2020
comment
Я вижу - я пытаюсь применить это к этому примеру - jsfiddle.net/xpb90keq/3 пытается чтобы формы исчезали, но я хотел сначала очистить функцию миксина - person The Old County; 14.12.2020
comment
Просто нужно знать, что всегда рекомендуется помещать все ваши миксины и переменные в другой файл sass/scss и @import сначала их. Или, если вы используете один файл sass/scss, всегда помещайте их вверху. - person Hao Wu; 14.12.2020
comment
jsfiddle.net/5f712csm — я применил его — но не вижу, чтобы он работал — бесконечно должен быть справа? - person The Old County; 14.12.2020
comment
jsfiddle.net/5f712csm/1 - ничего не работает - но я уверен, что скопировал идея во всем - person The Old County; 14.12.2020
comment
jsfiddle.net/zv2rc70d – 1 элемент продвигается вверх, но это происходит только в начале. заставить его постепенно появляться снизу, исчезать по мере того, как он поднимается вверх, и повторять бесконечное количество раз. - person The Old County; 14.12.2020
comment
Проверьте это: jsfiddle.net/nsrte6g5 . Вы забыли присвоить bubble ширину и высоту. Кроме того, вам нужно назначить animation-iteration-count на infinite, если вы хотите, чтобы циклы анимации - person Hao Wu; 14.12.2020
comment
Кроме того, если вам нужно задать еще один вопрос. Вместо этого вы должны задать другой вопрос. Комментарии не лучшее место для этого. - person Hao Wu; 14.12.2020
comment
stackoverflow.com/questions/65192163/ -- вопрос здесь - person The Old County; 14.12.2020
comment
ширина и высота пузыря - где? ах, сама частица - потому что ширина/высота зависят от размера значка внутри нее? - person The Old County; 14.12.2020
comment
@TheOldCounty Это так, но вы забыли также присвоить width и height svg внутри него. Если вы осмотрите элемент, вы увидите, что width и height все 0 - person Hao Wu; 14.12.2020
comment
jsfiddle.net/n139wod0/2 - person The Old County; 14.12.2020
comment
.magic-cloud .small .MuiSvgIcon-root {размер шрифта: 15px; } -- для этого есть css? - person The Old County; 14.12.2020
comment
как мне сделать так, чтобы формы исчезали в начале, а не просто появлялись в красной зоне - например, начинались в красном и заканчивались перед красным - codesandbox.io/s/holy-tdd-57ov7?file=/src/MagicCloud.js - person The Old County; 14.12.2020