You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/transitions-overview.md
+39-38Lines changed: 39 additions & 38 deletions
Original file line number
Diff line number
Diff line change
@@ -1,19 +1,20 @@
1
-
# Overview
1
+
# 概要
2
2
3
-
Vue offers some abstractions that can help work with transitions and animations, particularly in response to something changing. Some of these abstractions include:
-Hooks for components entering and leaving the DOM, in both CSS and JS, using the built-in `<transition>` component.
6
-
-Transition Modes so that you can orchestrate ordering during a transition.
7
-
-Hooks for when multiple elements are updating in position, with FLIP techniques applied under the hood to increase performance, using the `<transition-group>`component.
8
-
-Transitioning different states in an application, with `watchers`.
6
+
-組み込みコンポーネントの `<transition>` を使用して、CSS と JS の両方で DOM に出入りするコンポーネントをフックします。
We will cover all of these and more in the next three sections in this Guide. However, aside from these useful API offerings, it's worth mentioning that the class and style declarations we covered earlier can be used to apply animations and transitions as well, for more simple use cases.
11
+
このガイドの次の3つのセクションでは、上記のことについてすべて説明します。 ただし、提供する便利な API とは別に、前セクションで説明したクラスとスタイルの宣言を使用して、アニメーションやトランジションを適用し、より単純なユースケースにすることもできます。
11
12
12
-
In this next section, we'll go over some web animation and transitions basics, and link off to some resources for further exploration. If you're already familiar with web animation and how those principles might work with some of Vue's directives, feel free to skip this next section. For anyone else looking to learn a little more about web animation basics before diving in, read on.
13
+
この次のセクションでは、いくつかの Web アニメーションとトランジションの基本について説明し、さらに詳しく調べるためにいくつかのリソースにリンクします。Web アニメーションとそれらの原則が Vue のディレクティブの一部でどのように機能するか既に理解している場合、次のセクションをスキップしてください。Web アニメーションの基本についてもう少し学びたい人は、次のセクションを読んでください。
13
14
14
-
## Class-based Animations & Transitions
15
+
## クラスベースのアニメーションとトランジション
15
16
16
-
Though the `<transition>`component can be wonderful for components entering and leaving, you can also activate an animation without mounting a component, by adding a conditional class.
Some transition affects can be applied by interpolating values, for instance by binding a style to an element while an interaction occurs. Take this example for instance:
In this example, we are creating animation through the use of interpolation, attached to the mouse movement. The CSS transition is applied to the element as well, to let the element know what kind of easing to use while it's updating.
You may notice that the animations shown above are using things like `transforms`, and applying strange properties like `perspective`- why were they built that way instead of just using `margin`and`top`etc?
We can create extremely smooth animations on the web by being aware of performance. We want to hardware accelerate elements when we can, and use properties that don't trigger repaints. Let's go over some of how we can accomplish this.
We can check resources like [CSS-Triggers](https://csstriggers.com/)to see which properties will trigger repaints if we animate them. Here, if you look under `transform`, you will see:
> Changing transform does not trigger any geometry changes or painting, which is very good. This means that the operation can likely be carried out by the compositor thread with the help of the GPU.
For simple UI transitions, meaning from just one state to another with no intermediary states, it's common to use timings between 0.1s and 0.4s, and most folks find that _0.25s_ tends to be a sweet spot. Can you use that timing for everything? No, not really. If you have something that needs to move a greater distance or has more steps or state changes, 0.25s is not going to work as well and you will have to be much more intentional, and the timing will need to be more unique. That doesn't mean you can't have nice defaults that you repeat within your application, though.
You may also find that entrances look better with slightly more time than an exit. The user typically is being guided during the entrance, and is a little less patient upon exit because they want to go on their way.
Easing is an important way to convey depth in an animation. One of the most common mistakes newcomers to animation have is to use `ease-in`for entrances, and `ease-out`for exits. You'll actually need the opposite.
You can get a lot of unique effects and make your animation very stylish by adjusting your easing. CSS allows you to modify this by adjusting a cubic bezier property, [this playground](https://cubic-bezier.com/#.17,.67,.83,.67)by Lea Verou is very helpful for exploring this.
Though you can achieve great effects for simple animation with the two handles the cubic-bezier ease offers, JavaScript allows multiple handles, and therefore, allows for much more variance.
Take a bounce, for instance. In CSS we have to declare each keyframe, up and down. In JavaScript, we can express all of that movement within the ease, by declaring `bounce` in the [GreenSock API (GSAP)](https://greensock.com/)(other JS libraries have other types of easing defaults).
We'll be using GreenSock in some of the examples in the sections following. They have a great [ease visualizer](https://greensock.com/ease-visualizer)that will help you build nicely crafted eases.
0 commit comments