Animasi CSS memanfaatkan hubungan orangtua-anak – Beragampengetahuan

CSS modern memiliki cara hebat untuk memposisikan dan memindahkan sekelompok elemen relatif satu sama lain, seperti penentuan posisi jangkar. Meskipun demikian, dalam beberapa kasus mungkin lebih baik membuat animasi kecil dengan cara kuno, sehingga menghemat waktu dan tenaga.

Kami selalu dapat mempengaruhi struktur suatu elemen, seperti mengubah ukurannya dan memutarnya. Saat kita mengubah ukuran intrinsik suatu elemen, elemen turunannya juga terpengaruh. Ini adalah sesuatu yang bisa kita manfaatkan.

Misalkan ada beberapa lingkaran yang perlu saling berdekatan atau bersilangan. Sesuatu seperti ini:

Markup kami mungkin sesederhana itu <main> Sebuah elemen yang mengandung empat elemen anak .circle Elemen:

<main>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
  <div class="circle"></div>
</main>

Sedangkan untuk memutar benda, ada dua pilihan. Kita bisa (1) menjadi <main> wadah induk, atau (2) menganimasikan setiap wadah .circle sendiri.

Mungkin yang terbaik adalah mengatasi opsi pertama karena setiap opsi memerlukan animasi .circle Daripada menggunakan satu animasi, beberapa animasi perlu didefinisikan dan diatur. Sebelum kita melakukan ini, kita harus memastikan bahwa masing-masing .circle termasuk dalam <main> elemen dan kemudian benar-benar memposisikan setiap elemen di dalamnya:

main {
  contain: layout;
}

.circle {
  position: absolute;

  &:nth-of-type(1){
    background-color: rgb(0, 76, 255);
  }
  &:nth-of-type(2){
    background-color: rgb(255, 60, 0);
    right: 0;
  }
  &:nth-of-type(3){
    background-color: rgb(0, 128, 111);
    bottom: 0;
  }
  &:nth-of-type(4){
    background-color: rgb(255, 238, 0);
    right: 0;
    bottom: 0;
  }
}

jika kita memutar <main> elemen yang mengandung lingkaran, maka kita dapat membuat yang spesifik .animate Kelas yang hanya digunakan untuk rotasi:

/* Applied on <main> (the parent element) */
.animate {
  width: 0;
  transform: rotate(90deg);
  transition: width 1s, transform 1.3s;
}

…lalu masukkan <main> Elemen yang menggunakan JavaScript saat tombol diklik:

const MAIN = document.querySelector("main");
function play() {
  MAIN.className = "";
  MAIN.offsetWidth;
  MAIN.className = "animate";
}

Sepertinya kita menganimasikan empat lingkaran, tapi yang sebenarnya kita lakukan adalah memutar wadah induk dan mengubah lebarnya, yang juga memutar dan menekan semua lingkaran di dalamnya:

setiap .circle dipasang pada sudut yang sesuai <main> Miliki orang tua yang benar-benar diposisikan. Saat animasi terpicu di elemen induk – mis. <main> mendapatkan .animate Kelas ketika tombol diklik – <main> lebar menyusut dan memutar 90deg. Kontraksi itu menarik masing-masing .circle lebih dekat ke <main> Pusat elemen, rotasi menyebabkan lingkaran bertukar posisi saat melewati satu sama lain.

Pendekatan ini memudahkan untuk menganimasikan dan mengelola efek sederhana. Anda bahkan dapat melapisi animasi masing-masing elemen untuk variasi yang lebih banyak, seperti dua kotak yang saling bersilangan selama animasi.

/* Applied on <main> (the parent element) */
.animate {
  transform:  skewY(30deg) rotateY(180deg);
  transition: 1s transform .2s;
  
  .square {
    transform: skewY(30deg); 
    transition: inherit;
  }
}

Apakah kamu melihatnya? orang tua <main> Kontraktor Roh 30deg miringkan dan balikkan sepanjang sumbu Y, sedangkan kedua anak .square Elemen melawan distorsi ini dengan defleksi yang sama. Hasilnya adalah Anda melihat posisi sub-kotak terbalik saat mereka menjauh satu sama lain.

Jika kita ingin persegi membentuk pemisahan tanpa membalik, kita dapat melakukan hal berikut:

/* Applied on <main> (the parent element) */
.animate {
  transform:  skewY(30deg);
  transition: 1s transform .2s;
  
  .square {
    transform: skewY(-30deg); 
    transition: inherit;
  }
}

Kali ini, <main> kemiringan elemen 30deg,Dan .square Anak-anak membatalkan dengan a -30deg memiringkan.

lingkungan skew() Pada elemen induk untuk membantu mengatur ulang elemen turunan melebihi apa yang dimungkinkan oleh geometri persegi panjang pada umumnya. Perubahan apa pun pada induk dapat dilengkapi, diimbangi, atau dibatalkan oleh turunannya, bergantung pada efek yang Anda inginkan.

Berikut ini contoh yang melibatkan penskalaan. harap dicatat caranya <main> unsur skewY() ditolak oleh anak-anaknya dan scale()Nilai s yang berbeda untuk sedikit mengimbanginya.

/* Applied on <main> (the parent element) */
.animate {
  transform: rotate(-180deg) scale(.5) skewY(45deg) ;
  transition: .6s .2s; 
  transition-property: transform, border-radius;
  
  .squares {
    transform: skewY(-45deg) scaleX(1.5); 
    border-radius: 10px;
    transition: inherit;
  }
}

elemen induk (<main>) putaran berlawanan arah jarum jam (rotate(-180deg)), mengurangi (scale(.5)), dan miring secara vertikal (skewY(45deg)). dua anak (.square) menghilangkan distorsi induk dengan menggunakan nilai negatif untuk sudut kemiringan induk (skewY(-45deg)), dan memperbesar secara horizontal (scaleX(1.5)) berubah dari persegi menjadi batang horizontal.

Anda dapat menemukan banyak kombinasi seperti itu. Saya telah melakukan beberapa manipulasi lagi di bawah ini, daripada menggunakan interaktivitas JavaScript untuk memicu animasi, saya telah menggunakannya <details> Memicu animasi ketika elemen berada [open] nyatakan sekali <summary> Klik pada elemen tersebut. Dan setiap orang <summary> berisi a .icon Saat anak diperlihatkan animasi yang berbeda <details> Beralih antara hidup dan mati.

klik satu <details> Nyalakan dan matikan untuk melihat animasi beraksi.

Itu saja yang ingin saya bagikan – Jika kita berpikir tentang bagaimana transformasi elemen induk pada dasarnya memengaruhi ukuran, posisi, dan orientasi, mudah untuk melupakan bahwa kita memperoleh kekuatan untuk menulis animasi yang efisien. Misalnya, hal ini menghilangkan kebutuhan untuk menulis animasi kompleks untuk setiap elemen turunan, namun memanfaatkan apa yang dapat dilakukan elemen induk dan kemudian menyesuaikan perilaku tingkat turunan sesuai kebutuhan.