Skip to main content

Trong chương trước, chúng ta đã sử dụng các hiệu ứng chuyển tiếp trì hoãn để tạo hiệu ứng về chuyển động khi các phần tử di chuyển từ một danh sách công việc sang danh sách khác.

Để hoàn tất hiệu ứng, chúng ta cũng cần áp dụng chuyển động cho các phần tử không tham gia chuyển tiếp. Để làm điều này, chúng ta sử dụng chỉ thị animate.

Đầu tiên, nhập hàm flip — flip viết tắt của 'First, Last, Invert, Play' — từ svelte/animate vào TodoList.svelte:

TodoList.svelte
<script>
	import { flip } from 'svelte/animate';
	import { send, receive } from './transition.js';

	export let store;
	export let done;
</script>

Sau đó thêm nó vào các phần tử

  • :

    TodoList.svelte
    <li
	class:done
	in:receive={{ key: todo.id }}
	out:send={{ key: todo.id }}
	animate:flip
>

    Chuyển động hơi chậm trong trường hợp này, nên chúng ta có thể thêm một tham số duration:

    TodoList.svelte
    <li
	class:done
	in:receive={{ key: todo.id }}
	out:send={{ key: todo.id }}
	animate:flip={{ duration: 200 }}
>

    duration cũng có thể là một hàm d => milliseconds, trong đó d là số pixel mà phần tử phải di chuyển

    Lưu ý rằng tất cả các hiệu ứng chuyển tiếp và chuyển động đều được áp dụng bằng CSS, chứ không phải JavaScript, có nghĩa là chúng sẽ không chặn (hoặc bị chặn bởi) luồng chính.

    • Tiếp theo: Actions

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    <script>
    	import { send, receive } from './transition.js';
     
    	export let store;
    	export let done;
    </script>
     
    <ul class="todos">
    	{#each $store.filter((todo) => todo.done === done) as todo (todo.id)}
    		<li
    			class:done
    			in:receive={{ key: todo.id }}
    			out:send={{ key: todo.id }}
    		>
    			<label>
    				<input
    					type="checkbox"
    					checked={todo.done}
    					on:change={(e) => store.mark(todo, e.currentTarget.checked)}
    				/>
     
    				<span>{todo.description}</span>
     
    				<button on:click={() => store.remove(todo)} aria-label="Remove"></button>
    			</label>
    		</li>
    	{/each}
    </ul>
     
    <style>
    	label {
    		width: 100%;
    		height: 100%;
    		display: flex;
    	}
     
    	span {
    		flex: 1;
    	}
     
    	button {
    		background-image: url(./remove.svg);
    	}
    </style>
    initialising