Transitions & Animation > Enter & Leave Transitions の翻訳 #102
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…n transition-enterleave page
…on-enterleave page
|
Deploy preview for vuejs-v3-ja-doc-preview ready! Built with commit 037088d https://deploy-preview-102--vuejs-v3-ja-doc-preview.netlify.app |
|
Deploy preview for vuejs-v3-ja-doc-preview ready! Built with commit 8a0a02b https://deploy-preview-102--vuejs-v3-ja-doc-preview.netlify.app |
potato4d
commented
Oct 8, 2020
| @@ -14,7 +14,8 @@ | |||
| "serve": "vuepress dev src", | |||
| "build": "vuepress build src", | |||
| "test": "npm run lint", | |||
| "lint": "node -e \"var shell=require('shelljs');var files=shell.find(['./src/**/*.md']).filter(function(file){return !file.endsWith('/guide/team.md')}).join(' ');if(shell.exec('textlint --rulesdir ./node_modules/textlint-checker-for-vuejs-jp-docs/rules/textlint-rule-vue-jp-docs -f pretty-error '+files).code!==0){shell.exit(1)};\"" | |||
| "lint": "node -e \"var shell=require('shelljs');var files=shell.find(['./src/**/*.md']).filter(function(file){return !file.endsWith('/guide/team.md')}).join(' ');if(shell.exec('textlint --rulesdir ./node_modules/textlint-checker-for-vuejs-jp-docs/rules/textlint-rule-vue-jp-docs -f pretty-error '+files).code!==0){shell.exit(1)};\"", | |||
| "lint:single": "textlint --rulesdir ./node_modules/textlint-checker-for-vuejs-jp-docs/rules/textlint-rule-vue-jp-docs -f pretty-error" | |||
There was a problem hiding this comment.
[nits]
単体のファイルの Lint がなかったので追加 (既に取り込まれているファイルで Lint 落ちが 27 件あるので、修正と Lint の CI 追加を急ぎます)
|
|
||
| There are six classes applied for enter/leave transitions. |
There was a problem hiding this comment.
[note]
v2 ではこれらであり直訳としては正しいが、読みやすさの面で以下へと変更しました。
| @@ -511,16 +504,16 @@ Sometimes this works great, like when transitioning items are absolutely positio | |||
| </p> | |||
| <script async src="https://static.codepen.io/assets/embed/ei.js"></script> | |||
|
|
|||
| Sometimes this isn't an option, though, or we're dealing with more complex movement where in and out states need to be coordinated, so Vue offers an extremely useful utility called **transition modes**: | |||
| ただ、そうするわけにはいかない場合や、より複雑な in と out の動きの扱いについてコーディネートする必要がある場合に、Vue は非常に便利な **トランジションモード** というユーティリティを提供しています。 | |||
There was a problem hiding this comment.
[note]
ここ、はじめは coordinated を調整として翻訳していましたが、後述の部分で coordinated をカタカナ語として使うほうが適切な場面が出てきたので統一しました。
|
|
||
| We can use this to coordinate more expressive movement, such as a folding card, as demonstrated below. It's actually two elements transitioning between eachother, but since the beginning and end states are scaling the same: horizontally to 0, it appears like one fluid movement. This type of slight-of-hand can be very useful for realistic UI microinteractions: | ||
| これを利用することによって、以下のようなより表現力のある動きをコーディネートすることができます。二つの要素がお互いの間でトランジションしていますが、そのお互いの大きさが同じであり、水平方向の 0 の位置で重なるため、一つの要素の動きの流れに見えます。このような細かな調整は、よりリアルなマイクロインタラクションの表現で役立ちます: |
There was a problem hiding this comment.
デモ見ながら翻訳したんですが、2つの要素が横向きになるタイミングで重なり、その結果一つの要素として見えるということを言いたい内容ではあるのですが、直訳すると理解できない文章になりそうなのでこうしました 📝
coordinated をコーディネートのカタカナ語にしたのはここ由来です。
| @@ -253,35 +250,35 @@ const Demo = { | |||
| Vue.createApp(Demo).mount('#demo') | |||
| ``` | |||
|
|
|||
| ### Using Transitions and Animations Together | |||
| ### トランジションとアニメーションの併用 | |||
There was a problem hiding this comment.
[note]
v2 では トランジションとアニメーションを両方使う だったが、ここだけ動詞なのもよくわからないので統一
kazupon
requested changes
Oct 9, 2020
src/guide/transitions-enterleave.md
Outdated
| - 自動的に CSS トランジションやアニメーションのためのクラスを適用します。 | ||
| - [Animate.css](https://animate.style/) のようなサードパーティの CSS アニメーションライブラリと連携します。 | ||
| - トランジションフックが実行されている間、JavaScript を使って直接 DOM 操作を行います。 | ||
| - サードパーティの JavaScript アニメーションライブラリと連携します。 | ||
|
|
||
| On this page, we'll only cover entering, leaving, and list transitions, but you can see the next section for [managing state transitions](transitions-state.html). |
|
|
||
| We can use this to coordinate more expressive movement, such as a folding card, as demonstrated below. It's actually two elements transitioning between eachother, but since the beginning and end states are scaling the same: horizontally to 0, it appears like one fluid movement. This type of slight-of-hand can be very useful for realistic UI microinteractions: | ||
| これを利用することによって、以下のようなより表現力のある動きをコーディネートすることができます。二つの要素がお互いの間でトランジションしていますが、そのお互いの大きさが同じであり、水平方向の 0 の位置で重なるため、一つの要素の動きの流れに見えます。このような細かな調整は、よりリアルなマイクロインタラクションの表現で役立ちます: |
|
翻訳漏れ修正しました 🙇 |
kazupon
approved these changes
Oct 10, 2020
|
@potato4d |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
resolve #22
Enter & Leave Transitions のセクションを翻訳しました。