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>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
508
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

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

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

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

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

Изменять

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

к

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

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

Я все еще не вижу, как что-то движется?

The Old County 14.12.2020 02:49

Попробуйте нажать на кнопку Run @TheOldCounty

Hao Wu 14.12.2020 02:49

ах, он сдвинулся в начале - я просто думал, что смотрю страницу инициализации

The Old County 14.12.2020 02:53

поднимая дерзость -- расскажи мне больше -- почему это его материал не включает это?

The Old County 14.12.2020 02:53

Я вижу — я пытаюсь применить это к этому примеру — jsfiddle.net/xpb90keq/3 пытаюсь заставить формы исчезать — но я хотел сначала очистить функцию миксина

The Old County 14.12.2020 03:00

Просто нужно знать, что всегда рекомендуется помещать все ваши миксины и переменные в другой файл sass/scss и @import их в первую очередь. Или, если вы используете один файл sass/scss, всегда помещайте их вверху.

Hao Wu 14.12.2020 03:01
jsfiddle.net/5f712csm -- Я применил его, но не вижу, чтобы он работал -- бесконечность должна быть включена, верно?
The Old County 14.12.2020 03:04
jsfiddle.net/5f712csm/1 - нет, ничего не работает - но я уверен, что скопировал идею повсюду
The Old County 14.12.2020 03:07
jsfiddle.net/zv2rc70d -- 1 элемент перемещается вверх -- но делает это только в начале -- хочет, чтобы он постепенно появлялся снизу, исчезал по мере продвижения вверх -- и повторяется бесконечно
The Old County 14.12.2020 03:11

Проверьте это: jsfiddle.net/nsrte6g5. Вы забыли присвоить bubble ширину и высоту. Кроме того, вам нужно назначить animation-iteration-count на infinite, если вы хотите, чтобы анимационные циклы

Hao Wu 14.12.2020 03:14

Кроме того, если вам нужно задать еще один вопрос. Вместо этого вы должны задать другой вопрос. Комментарии не лучшее место для этого.

Hao Wu 14.12.2020 03:16
stackoverflow.com/questions/65192163/… -- вопрос здесь
The Old County 14.12.2020 03:21

ширина и высота пузыря - где? ах, сама частица - потому что ширина/высота зависят от размера значка внутри нее?

The Old County 14.12.2020 03:22

@TheOldCounty Это так, но вы забыли также присвоить width и heightsvg внутри него. Если вы осмотрите элемент, вы увидите, что width и height все 0

Hao Wu 14.12.2020 03:24

.magic-cloud .small .MuiSvgIcon-root {размер шрифта: 15px; } -- для этого есть css?

The Old County 14.12.2020 03:28

как мне сделать так, чтобы формы исчезали в начале, а не просто появлялись в красной зоне - например, начинались в красном и заканчивались перед красным - codeandbox.io/s/holy-tdd-57ov7?file= /src/MagicCloud.js

The Old County 14.12.2020 10:37

Другие вопросы по теме