Я пытаюсь заставить демо-версию этого примера работать, но я не вижу никакой анимации. Я хочу максимально сжать миксины и использовать включения, чтобы попытаться сохранить эффективность анимации.
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>
Вот две причины, почему ваш 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/
Попробуйте нажать на кнопку Run
@TheOldCounty
ах, он сдвинулся в начале - я просто думал, что смотрю страницу инициализации
поднимая дерзость -- расскажи мне больше -- почему это его материал не включает это?
Поднятие примерно означает, что определения всегда находятся наверху, например подъем в JavaScript вы можете ссылаться на функцию, прежде чем определять ее. Но в sass нет такой функции, поэтому вам нужно буквально вставить свой код определения, прежде чем ссылаться на них. Вот ответ, который объясняет это.
Я вижу — я пытаюсь применить это к этому примеру — jsfiddle.net/xpb90keq/3 пытаюсь заставить формы исчезать — но я хотел сначала очистить функцию миксина
Просто нужно знать, что всегда рекомендуется помещать все ваши миксины и переменные в другой файл sass/scss и @import
их в первую очередь. Или, если вы используете один файл sass/scss, всегда помещайте их вверху.
Проверьте это: jsfiddle.net/nsrte6g5. Вы забыли присвоить bubble
ширину и высоту. Кроме того, вам нужно назначить animation-iteration-count
на infinite
, если вы хотите, чтобы анимационные циклы
Кроме того, если вам нужно задать еще один вопрос. Вместо этого вы должны задать другой вопрос. Комментарии не лучшее место для этого.
ширина и высота пузыря - где? ах, сама частица - потому что ширина/высота зависят от размера значка внутри нее?
@TheOldCounty Это так, но вы забыли также присвоить width
и height
svg
внутри него. Если вы осмотрите элемент, вы увидите, что width
и height
все 0
.magic-cloud .small .MuiSvgIcon-root {размер шрифта: 15px; } -- для этого есть css?
как мне сделать так, чтобы формы исчезали в начале, а не просто появлялись в красной зоне - например, начинались в красном и заканчивались перед красным - codeandbox.io/s/holy-tdd-57ov7?file= /src/MagicCloud.js
Я все еще не вижу, как что-то движется?