Campuran animasi Sass menggunakan penyertaan

Saya mencoba agar demo contoh ini berfungsi - tetapi saya tidak melihat ada animasi yang bertahan. Saya ingin memadatkan mixin sebanyak mungkin dan menggunakan penyertaan untuk mencoba dan menjaga animasi tetap efisien

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

biola saya 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 sumber

Jawaban (1)


arrow_upward
1
arrow_downward

Inilah dua alasan mengapa sass Anda tidak dapat dikompilasi:

  • @mixin selalu didahulukan

Tidak ada pengangkatan di sass, jadi pastikan Anda selalu memasukkan mixin dan variabel sebelum merujuknya.

  • Jika Anda ingin menggunakan variabel pada penyeleksi/nama properti, Anda perlu menggunakan interpolations(#{})

Mengubah

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

to

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

Inilah biola yang diperbaiki: http://jsfiddle.net/hscbfeox/

person Hao Wu    schedule 14.12.2020
comment
Saya masih tidak melihat semuanya bergerak? - person The Old County; 14.12.2020
comment
Coba klik tombol Run @TheOldCounty - person Hao Wu; 14.12.2020
comment
ah itu pindah di awal - saya hanya berpikir saya sedang menonton halaman init - person The Old County; 14.12.2020
comment
mengangkat dengan kasar -- ceritakan lebih banyak -- mengapa barangnya tidak termasuk itu? - person The Old County; 14.12.2020
comment
Mengangkat secara kasar berarti definisinya selalu berada di urutan teratas, seperti mengangkat dalam JavaScript Anda dapat merujuk ke suatu fungsi sebelum Anda mendefinisikannya. Tetapi sass tidak memiliki fitur itu sehingga Anda harus memasukkan kode definisi Anda sebelum merujuknya. Berikut jawaban yang menjelaskannya. - person Hao Wu; 14.12.2020
comment
Begitu - Saya mencoba menerapkannya pada contoh ini - jsfiddle.net/xpb90keq/3 mencoba untuk membuat bentuknya memudar - tapi saya ingin membersihkan fungsi mixin terlebih dahulu - person The Old County; 14.12.2020
comment
Hanya perlu diketahui bahwa merupakan praktik yang baik untuk meletakkan semua mixin dan variabel Anda dalam file sass/scss yang berbeda dan @import terlebih dahulu. Atau jika Anda menggunakan satu file sass/scss, selalu letakkan di atas. - person Hao Wu; 14.12.2020
comment
jsfiddle.net/5f712csm -- Saya telah menerapkannya - tetapi saya tidak melihatnya berfungsi - tak terbatas harus aktif kan? - person The Old County; 14.12.2020
comment
jsfiddle.net/5f712csm/1 - tidak ada yang berfungsi - tapi saya yakin saya sudah menyalin idenya secara menyeluruh - person The Old County; 14.12.2020
comment
jsfiddle.net/zv2rc70d -- 1 item naik - tetapi hanya bergerak di awal -- tertarik untuk buat itu memudar dari bawah memudar saat sampai ke atas -- dan ulangi tanpa batas - person The Old County; 14.12.2020
comment
Periksa yang ini: jsfiddle.net/nsrte6g5 . Anda lupa menetapkan bubble lebar dan tinggi. Selain itu, Anda perlu menetapkan animation-iteration-count ke infinite jika Anda ingin animasi berulang - person Hao Wu; 14.12.2020
comment
Juga, jika Anda perlu bertanya lebih lanjut tentang pertanyaan lain. Anda sebaiknya menanyakan pertanyaan lain saja. Komentar bukanlah tempat yang baik untuk melakukan itu. - person Hao Wu; 14.12.2020
comment
stackoverflow.com/questions/65192163/ -- pertanyaannya ada di sini - person The Old County; 14.12.2020
comment
lebar dan tinggi gelembung -- di mana? ah partikelnya sendiri -- itu karena lebar/tingginya bergantung pada ukuran ikon di dalamnya? - person The Old County; 14.12.2020
comment
@TheOldCounty Benar, tetapi Anda lupa menetapkan width dan height ke svg di dalamnya juga. Jika Anda memeriksa elemennya, Anda dapat melihat width dan height semuanya 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 { ukuran font: 15 piksel; } -- ada cssnya? - person The Old County; 14.12.2020
comment
bagaimana cara mendapatkannya agar bentuknya memudar di awal - dan tidak hanya muncul di zona merah - seperti mulai dengan warna merah dan berakhir sebelum warna merah - codesandbox.io/s/holy-tdd-57ov7?file=/src/MagicCloud.js - person The Old County; 14.12.2020