translate 03-advanced-svelte/02-transitions into Japanese

Author: tomoam

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

@@ -2,9 +2,9 @@
 title: The transition directive
 ---
 
-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.
+要素を DOM に優美に追加したり削除したりすることで、より魅力的なユーザーインターフェイスを作成できます。Svelte は `transition` ディレクティブを使用してこれを非常に簡単にします。
 
-First, import the `fade` function from `svelte/transition`...
+まず、`svelte/transition` から `fade` 関数をインポートします。
 
 ```svelte
 <script>
@@ -13,7 +13,7 @@ First, import the `fade` function from `svelte/transition`...
 </script>
 ```
 
-...then add it to the `<p>` element:
+次に、それを `<p>` 要素に追加します。
 
 ```svelte
 <p +++transition:fade+++>Fades in and out</p>

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

@@ -2,7 +2,7 @@
 title: Adding parameters
 ---
 
-Transition functions can accept parameters. Replace the `fade` transition with `fly`...
+トランジション関数はパラメータを受け取ることができます。`fade` トランジションを `fly` に置き換えてください。
 
 ```svelte
 <script>
@@ -11,12 +11,12 @@ Transition functions can accept parameters. Replace the `fade` transition with `
 </script>
 ```
 
-...and apply it to the `<p>` along with some options:
+そして、`<p>` にいくつかのオプションと一緒にパラメータを設定してください。
 
 ```svelte
 <p transition:+++fly={{ y: 200, duration: 2000 }}+++>
 	+++Flies+++ in and out
 </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.
+トランジションは可逆的であることに注意してください。つまり、トランジションの最中にチェックボックスを切り替えると、開始位置や終了位置からではなく、現在の位置からトランジションをします。

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

@@ -2,18 +2,18 @@
 title: In and out
 ---
 
-Instead of the `transition` directive, an element can have an `in` or an `out` directive, or both together. Import `fade` alongside `fly`...
+`transition` ディレクティブの代わりに、要素に `in` や `out`、または両方のディレクティブを設定することができます。`fly` と一緒に `fade` をインポートしてください。
 
 ```js
 import { +++fade+++, fly } from 'svelte/transition';
 ```
 
-...then replace the `transition` directive with separate `in` and `out` directives:
+その後、`transition` ディレクティブを `in` と `out` ディレクティブにそれぞれ置き換えてください。
 
 ```svelte
 <p +++in+++:fly={{ y: 200, duration: 2000 }} +++out:fade+++>
 	Flies in, +++fades out+++
 </p>
 ```
 
-In this case, the transitions are _not_ reversed.
+この場合、トランジションは可逆的にはなりません。

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

@@ -2,7 +2,7 @@
 title: Custom CSS transitions
 ---
 
-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:
+`svelte/transition` モジュールにはいくつかのトランジションが組み込まれていますが、独自のトランジションを簡単に作成することができます。例として、これは `fade` トランジションのソースです。
 
 ```js
 function fade(node, { delay = 0, duration = 400 }) {
@@ -16,19 +16,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:
+この関数は、トランジションが適用されるノードと渡されたパラメータの2つの引数を取り、下記のプロパティをもつトランジションオブジェクトを返します。
 
-- `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` — トランジション開始までのミリ秒
+* `duration` — ミリ秒単位でのトランジションの長さ
+* `easing` — `p => t` イージング関数 ( [tweening](/tutorial/tweened) の章を参照)
+* `css` — `u === 1 - t` である `(t, u) => css` 関数
+* `tick` — ノードに何らかの影響を与える `(t, u) => {...}` 関数
 
-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.
+`t` 値は、イントロの開始やアウトロの終了時点では `0` であり、イントロの終了やアウトロの開始時点では `1` となります。
 
-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.
+ほとんどの場合、`css` プロパティを返すべきであり、`tick` プロパティを返すべき*ではない*です。なぜなら、CSSアニメーションは、UIが遅くなるのを防ぐために、可能であれば、メインスレッドとは別に動作するからです。Svelte は、トランジションを「シミュレート」し、 CSS アニメーションを作成してから実行させます。
 
-For example, the `fade` transition generates a CSS animation somewhat like this:
+たとえば、`fade` トランジションは次のような CSS アニメーションを生成します。
 
 ```css
 0% {
@@ -46,7 +46,7 @@ For example, the `fade` transition generates a CSS animation somewhat like this:
 }
 ```
 
-We can get a lot more creative though. Let's make something truly gratuitous:
+しかし、もっと独創的なものを作れます。本当に余計なトランジションを作ってみましょう。
 
 ```svelte
 <script>
@@ -74,4 +74,4 @@ We can get a lot more creative though. Let's make something truly gratuitous:
 </script>
 ```
 
-Remember: with great power comes great responsibility.
+忘れないで、大いなる力には大きな責任が伴います。

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

@@ -2,7 +2,7 @@
 title: Custom JS transitions
 ---
 
-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:
+一般に、トランジションには可能な限りCSSを用いるべきですが、いくつかのトランジション効果に関してはJavaScriptを用いないと実現できません。その一例がタイプライター効果です。
 
 ```js
 function typewriter(node, { speed = 1 }) {

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

@@ -2,7 +2,7 @@
 title: Transition events
 ---
 
-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:
+トランジションの開始と終了のタイミングを知ることができれば便利です。Svelteは他のDOMイベントと同様にリッスンすることができるイベントをディスパッチします。
 
 ```svelte
 <p

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

@@ -2,11 +2,11 @@
 title: Local transitions
 ---
 
-Ordinarily, transitions will play on elements when any container block is added or destroyed. In the example here, toggling the visibility of the entire list also applies transitions to individual list elements.
+通常、コンテナブロックが追加もしくは破棄されると、要素にトランジションが適用されます。この例では、リスト全体の表示を切り替えると、個々のリスト要素にもトランジションが適用されます。
 
-Instead, we'd like transitions to play only when individual items are added and removed — in other words, when the user drags the slider.
+かわりに、個々のアイテムが追加もしくは削除された時にのみトランジションが再生されるようにしたいと思います。-- 言い換えれば、ユーザーがスライダーをドラッグしたときです。
 
-We can achieve this with a _local_ transition, which only plays when the block with the transition itself is added or removed:
+これを実現するには、*ローカル* トランジションを使用します。これは、自身にトランジションを持つブロックが追加されたり削除されたりしたときにのみ再生されます。
 
 ```svelte
 <div transition:slide+++|local+++>

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

@@ -2,9 +2,9 @@
 title: Key blocks
 ---
 
-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.
+Key ブロックは、式の値が変更されたときにその中身を破棄して再作成します。これは、要素がDOMに出入りしたときだけでなく、値が変化したときにトランジションしたい場合に便利です。
 
-Here, for example, we'd like to play the `typewriter` transition from `transition.js` whenever the loading message changes. Wrap the `<p>` element in a key block:
+ここでは例えば、`transition.js` の `typewriter` トランジションを、ローディングメッセージが変わる度に再生させたいと思います。`<p>` 要素を key ブロックで囲みます。
 
 ```svelte
 +++{#key i}+++

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

@@ -2,13 +2,13 @@
 title: Deferred transitions
 ---
 
-A particularly powerful feature of Svelte's transition engine is the ability to _defer_ transitions, so that they can be coordinated between multiple elements.
+Svelte のトランジションエンジンで特に強力な特徴は、トランジションを*遅延*させて複数の要素間でトランジションが調整されるように出来ることです。
 
-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.
+このペアのToDoリストを見てみましょう。ToDoを切り替えると反対側のリストに送られます。現実の世界ではオブジェクトはこのような振る舞いをしません。消えたり別の場所に現れたりするのではなく、一連の中間的な位置を移動します。モーションを使用することでアプリで何が起こっているのかをユーザーに理解してもらうことができます。
 
-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.
+この効果は、transition.js にあるように、`send` と `receive` というトランジションのペアを作成する`crossfade` 関数を使用することで実現できます。要素は、「send」されると、対応する「receive」される要素を探し、その要素を相手の位置に変換してフェードアウトするトランジションを生成します。要素が「receive」されると、逆のことが起こります。対応する要素がない場合は、`fallback` トランジションが使われます。
 
-Open TodoList.svelte. First, import the `send` and `receive` transitions from transition.js:
+TodoList.svelte を開いてください。まず、transition.js から `send` と `receive` をインポートしてください。
 
 ```svelte
 <script>
@@ -19,7 +19,7 @@ Open TodoList.svelte. First, import the `send` and `receive` transitions from tr
 </script>
 ```
 
-Then, add them to the `<label>` element, using the `todo.id` property as a key to match the elements:
+それから、次の `<label>` 要素にもそれらを追加し、`todo.id` プロパティを、要素にマッチするキーとして使用します。
 
 ```svelte
 <label
@@ -28,4 +28,4 @@ Then, add them to the `<label>` element, using the `todo.id` property as a key t
 >
 ```
 
-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.
+これでアイテムを切り替えると、アイテムはスムーズに新しい場所に移動します。遷移していない項目は、まだ不器用に跳ね回っています。これは次の章で解決できます。