Skip to main content

Một tính năng mạnh mẽ của hệ thống chuyển tiếp của Svelte là khả năng trì hoãn các hiệu ứng chuyển tiếp, giúp chúng có thể được đồng bộ giữa nhiều phần tử.

Xem xét cặp danh sách todo này, trong đó việc chuyển đổi một todo gửi nó đến danh sách khác. Trong thực tế, các đối tượng không hoạt động như vậy — thay vì biến mất và xuất hiện lại ở một nơi khác, chúng di chuyển qua một loạt các vị trí trung gian. Sử dụng chuyển động có thể giúp người dùng hiểu được điều gì đang xảy ra trong ứng dụng của bạn.

Chúng ta có thể tạo được hiệu ứng này bằng cách sử dụng hàm crossfade như trong transition.js, tạo ra một cặp chuyển tiếp gọi là send và receive. Khi một phần tử được 'gửi', nó sẽ tìm kiếm một phần tử tương ứng đang được 'nhận', và tạo ra một chuyển động chuyển đổi phần tử đó đến vị trí của phần tử đối tác và làm mờ nó đi. Khi một phần tử được 'nhận', điều ngược lại sẽ xảy ra. Nếu không có phần tử đối tác, chuyển tiếp fallback sẽ được sử dụng.

Mở TodoList.svelte. Đầu tiên, nhập các chuyển tiếp send và receive từ transition.js:

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

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

Sau đó, thêm chúng vào phần tử

  • , sử dụng thuộc tính todo.id làm khóa để phù hợp các phần tử:

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

    Bây giờ, khi bạn chuyển đổi các mục, chúng sẽ di chuyển mượt mà đến vị trí mới của chúng. Các mục không chuyển tiếp vẫn nhảy lên xung quanh một cách không thoải mái — chúng ta có thể sửa nó trong chương tiếp theo.

    • Tiếp theo: Animations

    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
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    <script>
    	import { createTodoStore } from './todos.js';
    	import TodoList from './TodoList.svelte';
     
    	const todos = createTodoStore([
    		{ done: false, description: 'viết một vài hướng dẫn' },
    		{ done: false, description: 'bắt đầu viết blog' },
    		{ done: true, description: 'mua một ít sửa' },
    		{ done: false, description: 'cắt cỏ' },
    		{ done: false, description: 'cho rùa ăn' },
    		{ done: false, description: 'sửa một vài lỗi' }
    	]);
    </script>
     
    <div class="board">
    	<input
    		placeholder="việc gì cần được hoàn thành?"
    		on:keydown={(e) => {
    			if (e.key !== 'Enter') return;
     
    			todos.add(e.currentTarget.value);
    			e.currentTarget.value = '';
    		}}
    	/>
     
    	<div class="todo">
    		<h2>todo</h2>
    		<TodoList store={todos} done={false} />
    	</div>
     
    	<div class="done">
    		<h2>xong</h2>
    		<TodoList store={todos} done={true} />
    	</div>
    </div>
     
    <style>
    	.board {
    		display: grid;
    		grid-template-columns: 1fr 1fr;
    		grid-column-gap: 1em;
    		max-width: 36em;
    		margin: 0 auto;
    	}
     
    	.board > input {
    		font-size: 1.4em;
    		grid-column: 1/3;
    		padding: 0.5em;
    		margin: 0 0 1rem 0;
    	}
     
    	h2 {
    		font-size: 2em;
    		font-weight: 200;
    	}
    </style>
    initialising