docs:11-dịch-2-advanced-svelte-transitions (sveltevietnam#74)

Author: tymon3568

content/tutorial/02-advanced-svelte/02-transitions/01-transition/README.md

@@ -1,10 +1,11 @@
 ---
-title: The transition directive
+title: Chỉ thị chuyển tiếp
 ---
 
-We can make more appealing user interfaces by gracefully transitioning elements into and out of the DOM. Svelte makes this very easy with the `transition` directive.
+Chúng ta có thể tạo giao diện người dùng hấp dẫn hơn bằng cách chuyển tiếp nhẹ các phần tử vào và ra khỏi DOM. Svelte làm điều này rất dễ dàng với chỉ thị `transition`.
+
+Đầu tiên, nhập hàm `fade` từ `svelte/transition`...
 
-First, import the `fade` function from `svelte/transition`...
 
 ```svelte
 /// file: App.svelte
@@ -14,7 +15,7 @@ First, import the `fade` function from `svelte/transition`...
 </script>
 ```
 
-...then add it to the `<p>` element:
+...sau đó thêm vào phần tử `<p>`:
 
 ```svelte
 /// file: App.svelte

content/tutorial/02-advanced-svelte/02-transitions/01-transition/app-a/src/lib/App.svelte

@@ -4,7 +4,7 @@
 
 <label>
 	<input type="checkbox" bind:checked={visible} />
-	visible
+	hiện
 </label>
 
 {#if visible}

content/tutorial/02-advanced-svelte/02-transitions/01-transition/app-b/src/lib/App.svelte

@@ -5,7 +5,7 @@
 
 <label>
 	<input type="checkbox" bind:checked={visible} />
-	visible
+	hiện
 </label>
 
 {#if visible}

content/tutorial/02-advanced-svelte/02-transitions/02-adding-parameters-to-transitions/README.md

@@ -1,8 +1,8 @@
 ---
-title: Adding parameters
+title: Thêm tham số
 ---
 
-Transition functions can accept parameters. Replace the `fade` transition with `fly`...
+Hàm chuyển tiếp có thể chấp nhận các tham số. Thay thế chuyển tiếp `fade` bằng `fly`...
 
 ```svelte
 /// file: App.svelte
@@ -12,7 +12,7 @@ Transition functions can accept parameters. Replace the `fade` transition with `
 </script>
 ```
 
-...and apply it to the `<p>` along with some options:
+... và áp dụng nó cho phần tử <p> cùng với một số tùy chọn:
 
 ```svelte
 /// file: App.svelte
@@ -21,4 +21,4 @@ Transition functions can accept parameters. Replace the `fade` transition with `
 </p>
 ```
 
-Note that the transition is _reversible_ — if you toggle the checkbox while the transition is ongoing, it transitions from the current point, rather than the beginning or the end.
+Lưu ý: chuyển tiếp có thể _đảo ngược_ — nếu bạn thay đổi checkbox trong khi chuyển động đang diễn ra, nó sẽ chuyển tiếp từ điểm hiện tại, thay vì từ đầu hoặc cuối.

content/tutorial/02-advanced-svelte/02-transitions/02-adding-parameters-to-transitions/app-b/src/lib/App.svelte

@@ -5,7 +5,7 @@
 
 <label>
 	<input type="checkbox" bind:checked={visible} />
-	visible
+	hiện
 </label>
 
 {#if visible}

content/tutorial/02-advanced-svelte/02-transitions/03-in-and-out/README.md

@@ -1,15 +1,15 @@
 ---
-title: In and out
+title: In và out
 ---
 
-Instead of the `transition` directive, an element can have an `in` or an `out` directive, or both together. Import `fade` alongside `fly`...
+Thay vì sử dụng chỉ thị `transition`, một phần tử có thể có một chỉ thị `in` hoặc một chỉ thị `out`, hoặc cả hai cùng một lúc. Import `fade` cùng với `fly`...
 
 ```js
 /// file: App.svelte
 import { +++fade+++, fly } from 'svelte/transition';
 ```
 
-...then replace the `transition` directive with separate `in` and `out` directives:
+... sau đó thay thế chỉ thị `transition` bằng các chỉ thị `in` và `out` riêng lẻ:
 
 ```svelte
 /// file: App.svelte
@@ -18,4 +18,4 @@ import { +++fade+++, fly } from 'svelte/transition';
 </p>
 ```
 
-In this case, the transitions are _not_ reversed.
+Trong trường hợp này, các chuyển tiếp không được _đảo ngược_.

content/tutorial/02-advanced-svelte/02-transitions/03-in-and-out/app-b/src/lib/App.svelte

@@ -5,7 +5,7 @@
 
 <label>
 	<input type="checkbox" bind:checked={visible} />
-	visible
+	hiện
 </label>
 
 {#if visible}

content/tutorial/02-advanced-svelte/02-transitions/04-custom-css-transitions/README.md

@@ -1,8 +1,8 @@
 ---
-title: Custom CSS transitions
+title: Tùy biến CSS chuyển tiếp
 ---
 
-The `svelte/transition` module has a handful of built-in transitions, but it's very easy to create your own. By way of example, this is the source of the `fade` transition:
+Module `svelte/transition` có một số chuyển tiếp tích hợp sẵn, nhưng rất dễ tạo ra chuyển tiếp riêng của bạn. Qua ví dụ, đây là mã nguồn của chuyển tiếp `fade`:
 
 ```js
 /// no-file
@@ -17,19 +17,19 @@ function fade(node, { delay = 0, duration = 400 }) {
 }
 ```
 
-The function takes two arguments — the node to which the transition is applied, and any parameters that were passed in — and returns a transition object which can have the following properties:
+Hàm nhận hai đối số — node mà chuyển tiếp được áp dụng và bất kỳ tham số nào được truyền vào — và trả về một đối tượng chuyển tiếp có thể có các thuộc tính sau:
 
-- `delay` — milliseconds before the transition begins
-- `duration` — length of the transition in milliseconds
-- `easing` — a `p => t` easing function (see the chapter on [tweening](/tutorial/tweens))
-- `css` — a `(t, u) => css` function, where `u === 1 - t`
-- `tick` — a `(t, u) => {...}` function that has some effect on the node
+- `delay` — số mili giây trước khi chuyển tiếp bắt đầu
+- `duration` — độ dài của chuyển động trong mili giây
+- `easing` — một hàm easing `p => t` (xem chương [tweening](/tutorial/tweens))
+- `css` — một hàm `(t, u) => css`, trong đó `u === 1 - t`
+- `tick` — một hàm `(t, u) => {...}` có một số ảnh hưởng đối với node
 
-The `t` value is `0` at the beginning of an intro or the end of an outro, and `1` at the end of an intro or beginning of an outro.
+Giá trị `t` là `0` ở đầu của một intro hoặc cuối của một outro, và `1` ở cuối của một intro hoặc đầu của một outro.
 
-Most of the time you should return the `css` property and _not_ the `tick` property, as CSS animations run off the main thread to prevent jank where possible. Svelte 'simulates' the transition and constructs a CSS animation, then lets it run.
+Thường thì bạn nên trả về thuộc tính `css` và _không_ phải thuộc tính `tick`, vì các hoạt ảnh CSS chạy ngoài luồng chính để ngăn chặn gián đoạn khi có thể. Svelte 'mô phỏng' chuyển tiếp và xây dựng một hoạt ảnh CSS, sau đó để nó chạy.
 
-For example, the `fade` transition generates a CSS animation somewhat like this:
+Ví dụ, chuyển tiếp `fade` tạo ra một hoạt ảnh CSS giống như sau:
 
 ```css
 /// no-file
@@ -40,7 +40,7 @@ For example, the `fade` transition generates a CSS animation somewhat like this:
 100% { opacity: 1 }
 ```
 
-We can get a lot more creative though. Let's make something truly gratuitous:
+Chúng ta có thể sáng tạo nhiều hơn. Hãy tạo ra điều gì đó thực sự miễn phí:
 
 ```svelte
 /// file: App.svelte
@@ -69,4 +69,4 @@ We can get a lot more creative though. Let's make something truly gratuitous:
 </script>
 ```
 
-Remember: with great power comes great responsibility.
+Nhớ rằng: quyền lực lớn đến từ trách nhiệm lớn.

content/tutorial/02-advanced-svelte/02-transitions/04-custom-css-transitions/app-a/src/lib/App.svelte

@@ -13,7 +13,7 @@
 
 <label>
 	<input type="checkbox" bind:checked={visible} />
-	visible
+	hiện
 </label>
 
 {#if visible}

content/tutorial/02-advanced-svelte/02-transitions/04-custom-css-transitions/app-b/src/lib/App.svelte

@@ -24,7 +24,7 @@
 
 <label>
 	<input type="checkbox" bind:checked={visible} />
-	visible
+	hiện
 </label>
 
 {#if visible}

content/tutorial/02-advanced-svelte/02-transitions/05-custom-js-transitions/README.md

@@ -1,16 +1,17 @@
 ---
-title: Custom JS transitions
+title: Tùy biến JS chuyển tiếp
 ---
 
-While you should generally use CSS for transitions as much as possible, there are some effects that can't be achieved without JavaScript, such as a typewriter effect:
+Mặc dù bạn nên sử dụng CSS cho chuyển tiếp nhiều nhất có thể, có một số hiệu ứng không thể chạy được mà không có JavaScript, như hiệu ứng máy đánh chữ:
+
 
 ```js
 /// file: App.svelte
 function typewriter(node, { speed = 1 }) {
 	const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
 
 	if (!valid) {
-		throw new Error(`This transition only works on elements with a single text node child`);
+		throw new Error(`Quá trình chuyển tiếp này chỉ hoạt động trên các phần tử có một node văn bản con`);
 	}
 
 	+++const text = node.textContent;

content/tutorial/02-advanced-svelte/02-transitions/05-custom-js-transitions/app-a/src/lib/App.svelte

@@ -5,7 +5,7 @@
 		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
 
 		if (!valid) {
-			throw new Error(`This transition only works on elements with a single text node child`);
+			throw new Error(`Quá trình chuyển tiếp này chỉ hoạt động trên các phần tử có một node văn bản con`);
 		}
 
 		return {};
@@ -14,7 +14,7 @@
 
 <label>
 	<input type="checkbox" bind:checked={visible} />
-	visible
+	hiện
 </label>
 
 {#if visible}

content/tutorial/02-advanced-svelte/02-transitions/05-custom-js-transitions/app-b/src/lib/App.svelte

@@ -5,7 +5,7 @@
 		const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
 
 		if (!valid) {
-			throw new Error(`This transition only works on elements with a single text node child`);
+			throw new Error(`Quá trình chuyển tiếp này chỉ hoạt động trên các phần tử có một node văn bản con`);
 		}
 
 		const text = node.textContent;
@@ -23,7 +23,7 @@
 
 <label>
 	<input type="checkbox" bind:checked={visible} />
-	visible
+	hiện
 </label>
 
 {#if visible}

content/tutorial/02-advanced-svelte/02-transitions/06-transition-events/README.md

@@ -1,8 +1,8 @@
 ---
-title: Transition events
+title: Các sự kiện chuyển tiếp
 ---
 
-It can be useful to know when transitions are beginning and ending. Svelte dispatches events that you can listen to like any other DOM event:
+Việc biết khi nào chuyển tiếp bắt đầu và kết thúc có thể hữu ích. Svelte phát ra các sự kiện mà bạn có thể lắng nghe giống như bất kỳ sự kiện DOM nào khác:
 
 ```svelte
 /// file: App.svelte

content/tutorial/02-advanced-svelte/02-transitions/07-global-transitions/README.md

@@ -1,12 +1,13 @@
 ---
-title: Global transitions
+title: Chuyển tiếp toàn cục
 ---
 
-Ordinarily, transitions will only play on elements when their direct containing block is added or destroyed. In the example here, toggling the visibility of the entire list does not apply transitions to individual list elements.
+Thường thì, các chuyển tiếp chỉ hoạt động trên các phần tử khi khối chứa trực tiếp của chúng được thêm vào hoặc hủy bỏ. Trong ví dụ này, việc chuyển đổi khả năng nhìn thấy của toàn bộ danh sách không áp dụng các chuyển tiếp cho các phần tử danh sách cục bộ.
 
-Instead, we'd like transitions to not only play when individual items are added and removed with the slider but also when we toggle the checkbox.
 
-We can achieve this with a _global_ transition, which plays when _any_ block containing the transitions is added or removed:
+Thay vào đó, chúng ta muốn các chuyển tiếp không chỉ hoạt động khi các mục cục bộ được thêm và loại bỏ với thanh trượt mà còn khi chúng ta chuyển đổi checkbox.
+
+Chúng ta có thể làm được điều này với một chuyển tiếp _toàn cục_, chạy khi _bất kỳ_ khối chứa các chuyển tiếp nào được thêm hoặc xóa:
 
 ```svelte
 /// file: App.svelte
@@ -15,4 +16,4 @@ We can achieve this with a _global_ transition, which plays when _any_ block con
 </div>
 ```
 
-> In Svelte 3, transitions were global by default and you had to use the `|local` modifier to make them local.
+> Trong Svelte 3, các chuyển tiếp mặc định là toàn cục (global) và bạn phải sử dụng modifier `|local` để làm chúng trở thành chuyển tiếp cục bộ.

content/tutorial/02-advanced-svelte/02-transitions/07-global-transitions/app-a/src/lib/App.svelte

@@ -8,7 +8,7 @@
 
 <label>
 	<input type="checkbox" bind:checked={showItems} />
-	show list
+	xem danh sách
 </label>
 
 <label>

content/tutorial/02-advanced-svelte/02-transitions/07-global-transitions/app-b/src/lib/App.svelte

@@ -8,7 +8,7 @@
 
 <label>
 	<input type="checkbox" bind:checked={showItems} />
-	show list
+	xem danh sách
 </label>
 
 <label>

content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/README.md

@@ -1,10 +1,11 @@
 ---
-title: Key blocks
+title: Key blocks (khối khóa)
 ---
 
-Key blocks destroy and recreate their contents when the value of an expression changes. This is useful if you want an element to play its transition whenever a value changes instead of only when the element enters or leaves the DOM.
+Các khối khóa (key blocks) hủy và tạo lại nội dung của chúng khi giá trị của biểu thức thay đổi. Điều này rất hữu ích trong trường hợp bạn muốn một phần tử chạy hiệu ứng chuyển tiếp mỗi khi giá trị thay đổi thay vì chỉ khi phần tử vào hoặc rời khỏi DOM.
+
+Ở đây, ví dụ, chúng ta muốn chạy hiệu ứng chuyển tiếp `typewriter` từ `transition.js` mỗi khi thông báo tải, tức là `i`, thay đổi. Bọc phần tử `<p>` trong một khối khóa:
 
-Here, for example, we'd like to play the `typewriter` transition from `transition.js` whenever the loading message, i.e. `i` changes. Wrap the `<p>` element in a key block:
 
 ```svelte
 /// file: App.svelte

content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/app-a/src/lib/App.svelte

@@ -17,7 +17,7 @@
 	});
 </script>
 
-<h1>loading...</h1>
+<h1>đang tải...</h1>
 
 <p in:typewriter={{ speed: 10 }}>
 	{messages[i] || ''}

content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/app-a/src/lib/transition.js

@@ -2,7 +2,7 @@ export function typewriter(node, { speed = 1 }) {
 	const valid = node.childNodes.length === 1 && node.childNodes[0].nodeType === Node.TEXT_NODE;
 
 	if (!valid) {
-		throw new Error(`This transition only works on elements with a single text node child`);
+		throw new Error(`Quá trình chuyển tiếp này chỉ hoạt động trên các phần tử có một node văn bản con`);
 	}
 
 	const text = node.textContent;

content/tutorial/02-advanced-svelte/02-transitions/08-key-blocks/app-b/src/lib/App.svelte

@@ -17,7 +17,7 @@
 	});
 </script>
 
-<h1>loading...</h1>
+<h1>đang tải...</h1>
 
 {#key i}
 	<p in:typewriter={{ speed: 10 }}>

content/tutorial/02-advanced-svelte/02-transitions/09-deferred-transitions/README.md

@@ -1,14 +1,14 @@
 ---
-title: Deferred transitions
+title: Chuyển tiếp trì hoãn
 ---
 
-A particularly powerful feature of Svelte's transition engine is the ability to _defer_ transitions, so that they can be coordinated between multiple elements.
+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ử.
 
-Take this pair of todo lists, in which toggling a todo sends it to the opposite list. In the real world, objects don't behave like that — instead of disappearing and reappearing in another place, they move through a series of intermediate positions. Using motion can go a long way towards helping users understand what's happening in your app.
+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.
 
-We can achieve this effect using the `crossfade` function, as seen in `transition.js`, which creates a pair of transitions called `send` and `receive`. When an element is 'sent', it looks for a corresponding element being 'received', and generates a transition that transforms the element to its counterpart's position and fades it out. When an element is 'received', the reverse happens. If there is no counterpart, the `fallback` transition is used.
+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.
 
-Open `TodoList.svelte`. First, import the `send` and `receive` transitions from transition.js:
+Mở `TodoList.svelte`. Đầu tiên, nhập các chuyển tiếp `send` và `receive` từ `transition.js`:
 
 ```svelte
 /// file: TodoList.svelte
@@ -20,7 +20,7 @@ Open `TodoList.svelte`. First, import the `send` and `receive` transitions from
 </script>
 ```
 
-Then, add them to the `<li>` element, using the `todo.id` property as a key to match the elements:
+Sau đó, thêm chúng vào phần tử <li>, sử dụng thuộc tính `todo.id` làm khóa để phù hợp các phần tử:
 
 ```svelte
 /// file: TodoList.svelte
@@ -31,4 +31,4 @@ Then, add them to the `<li>` element, using the `todo.id` property as a key to m
 >
 ```
 
-Now, when you toggle items, they move smoothly to their new location. The non-transitioning items still jump around awkwardly — we can fix that in the next chapter.
+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.