Svelte Tutorial 11: Animations (English & Indonesia)

English

The Animate Directive

In the previous example, we used deferred transitions to create the illusion of motion as elements move from one todo list to the other.

To complete the illusion, we also need to apply motion to the elements that aren't transitioning. For this, we use the animate directive.

First, import the flip function — flip stands for  'First, Last, Invert, Play' — from svelte/animate:

import { flip } from 'svelte/animate';

Then add it to the <label> elements:

<label
  in:receive="{{key: todo.id}}"
  out:send="{{key: todo.id}}"
  animate:flip
>

You'll see that if you check something and it moved to other side,remaining item will slowly going up, instead of immediately jump. If you want to change speed of movement, we can add a duration parameter:

<label
  in:receive="{{key: todo.id}}"
  out:send="{{key: todo.id}}"
  animate:flip="{{duration: 200}}"

>

duration can also be a d => miliseconds function, where d is the number of pixels the element has to travel.

Note that all the transitions and animations are being applied with CSS, rather than JavaScript, meaning they won't block (or be blocked by) the main thread.

Indonesia

The Animate Directive

Pada contoh sebelumnya, kita menggunakan transisi defer untuk membuat ilusi gerakan saat satu elemen pindah dari daftar todo ke daftar satunya.

Untuk melengkapi, kita juga bisa memberikan efek gerakan untuk elemen yang tidak pindah. Untuk keperluan ini kita bisa menggunakan direktiv animate.

Pertama, kita import fungsi flip — flip singkatan dari  'First, Last, Invert, Play' — dari svelte/animate:

import { flip } from 'svelte/animate';

Kemudian tinggal menambahkan ke elemen <label> :

<label
  in:receive="{{key: todo.id}}"
  out:send="{{key: todo.id}}"
  animate:flip
>

Kamu akan bisa lihat, jika kita memilih sesuatu kemudian pindah ke daftar sebelahnya, item yang tersisa akan pelan-pelan naik ke atas, dan tidak lompat seketika. Jika ingin mengganti kecepatan gerakan, kita bisa menambahkan parameter duration:

<label
  in:receive="{{key: todo.id}}"
  out:send="{{key: todo.id}}"
  animate:flip="{{duration: 200}}"
>

duration juga bisa berupa fungsi d => miliseconds, d adalah jumlah pixel yang dilewati elemen.

Perhatikan bahwa semua transisi dan animasi akan dijalankan pada CSS, dan bukan JavaScript, jadi mereka tidak akan menghalangi (atau dihalangi) oleh main thread.