From 77f0cdda9ccb8b83d0035bc13d41108baa510042 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 8 Apr 2021 09:29:32 -0300 Subject: [PATCH 01/39] translate: introduction, about guide & prerequisites --- aio/content/guide/animations.md | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index be57cf40d4ce..b99e9917798c 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -1,27 +1,28 @@ -# Introduction to Angular animations +# Introducción a las animaciones en Angular -Animation provides the illusion of motion: HTML elements change styling over time. Well-designed animations can make your application more fun and easier to use, but they aren't just cosmetic. Animations can improve your app and user experience in a number of ways: +La animación proporciona la ilusión de movimiento: los elementos HTML cambian de estilo con el tiempo. +Las animaciones bien diseñadas pueden hacer que su aplicación sea más divertida y fácil de usar, pero no son sólo un decorado. Las animaciones pueden mejorar su aplicación y la experiencia del usuario de varias formas: -* Without animations, web page transitions can seem abrupt and jarring. +* Sin animaciones, las transiciones de páginas web pueden parecer abruptas y discordantes. -* Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions. +* El movimiento mejora en gran medida la experiencia del usuario, por lo que las animaciones les dan la oportunidad de detectar la respuesta de la aplicación a sus acciones. -* Good animations intuitively call the user's attention to where it is needed. +* Las buenas animaciones llaman la atención del usuario de forma intuitiva hacia donde se necesita. -Typically, animations involve multiple style *transformations* over time. An HTML element can move, change color, grow or shrink, fade, or slide off the page. These changes can occur simultaneously or sequentially. You can control the timing of each transformation. +Normalmente, las animaciones implican múltiples *transformaciones* de estilo a lo largo del tiempo. Un elemento HTML puede moverse, cambiar de color, crecer o encogerse, desvanecerse o deslizarse fuera de la página. Estos cambios pueden ocurrir de forma simultánea o secuencial. Usted puede controlar el momento de cada transformación. -Angular's animation system is built on CSS functionality, which means you can animate any property that the browser considers animatable. This includes positions, sizes, transforms, colors, borders, and more. The W3C maintains a list of animatable properties on its [CSS Transitions](https://www.w3.org/TR/css-transitions-1/) page. +El sistema de animación de Angular se basa en las funcionalidades de CSS, lo que significa que puede animar cualquier propiedad que el navegador considere animable. Esto incluye posiciones, tamaños, transformaciones, colores, bordes, etc. El W3C mantiene una lista de propiedades animables en su página +[CSS Transitions](https://www.w3.org/TR/css-transitions-1/). -## About this guide +## Sobre esta guía +Esta guía cubre las funciones básicas de animación en Angular para comenzar a agregar animaciones de Angular a su proyecto. -This guide covers the basic Angular animation features to get you started on adding Angular animations to your project. +Las funciones descritas en esta guía — y las funciones más avanzadas descritas en las guías de animaciones en Angular relacionadas — se muestran en una aplicación de ejemplo disponible como . -The features described in this guide — and the more advanced features described in the related Angular animations guides — are demonstrated in an example app available as a . +#### Prerequisitos -#### Prerequisites - -The guide assumes that you're familiar with building basic Angular apps, as described in the following sections: +La guía asume que está familiarizado con la creación de aplicaciones básicas en Angular, como se describe en las siguientes secciones: * [Tutorial](tutorial) * [Architecture Overview](guide/architecture) From f7ae54b151632e4450860c9cf892a6b3e61be8f7 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Fri, 16 Apr 2021 16:35:46 -0300 Subject: [PATCH 02/39] docs: translate animations.md up to Animations API summary --- aio/content/guide/animations.en.md | 331 +++++++++++++++++++++++++++++ aio/content/guide/animations.md | 165 +++++++------- 2 files changed, 415 insertions(+), 81 deletions(-) create mode 100644 aio/content/guide/animations.en.md diff --git a/aio/content/guide/animations.en.md b/aio/content/guide/animations.en.md new file mode 100644 index 000000000000..3297f2667d5d --- /dev/null +++ b/aio/content/guide/animations.en.md @@ -0,0 +1,331 @@ +# Introduction to Angular animations + +Animation provides the illusion of motion: HTML elements change styling over time. Well-designed animations can make your application more fun and easier to use, but they aren't just cosmetic. Animations can improve your app and user experience in a number of ways: + +* Without animations, web page transitions can seem abrupt and jarring. + +* Motion greatly enhances the user experience, so animations give users a chance to detect the application's response to their actions. + +* Good animations intuitively call the user's attention to where it is needed. + +Typically, animations involve multiple style *transformations* over time. An HTML element can move, change color, grow or shrink, fade, or slide off the page. These changes can occur simultaneously or sequentially. You can control the timing of each transformation. + +Angular's animation system is built on CSS functionality, which means you can animate any property that the browser considers animatable. This includes positions, sizes, transforms, colors, borders, and more. The W3C maintains a list of animatable properties on its [CSS Transitions](https://www.w3.org/TR/css-transitions-1/) page. + + +## About this guide + +This guide covers the basic Angular animation features to get you started on adding Angular animations to your project. + +The features described in this guide — and the more advanced features described in the related Angular animations guides — are demonstrated in an example app available as a . + +#### Prerequisites + +The guide assumes that you're familiar with building basic Angular apps, as described in the following sections: + +* [Tutorial](tutorial) +* [Architecture Overview](guide/architecture) + + +## Getting started + +The main Angular modules for animations are `@angular/animations` and `@angular/platform-browser`. When you create a new project using the CLI, these dependencies are automatically added to your project. + +To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular functionality. + +### Step 1: Enabling the animations module + +Import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module. + + + +
+ +**Note:** When you use the CLI to create your app, the root application module `app.module.ts` is placed in the `src/app` folder. +
+ +### Step 2: Importing animation functions into component files + +If you plan to use specific animation functions in component files, import those functions from `@angular/animations`. + + + + +
+ +**Note:** See a [summary of available animation functions](guide/animations#animation-api-summary) at the end of this guide. +
+ +### Step 3: Adding the animation metadata property + +In the component file, add a metadata property called `animations:` within the `@Component()` decorator. You put the trigger that defines an animation within the `animations` metadata property. + + + + +## Animating a simple transition + +Let's animate a simple transition that changes a single HTML element from one state to another. For example, you can specify that a button displays either **Open** or **Closed** based on the user's last action. When the button is in the `open` state, it's visible and yellow. When it's the `closed` state, it's transparent and green. + +In HTML, these attributes are set using ordinary CSS styles such as color and opacity. In Angular, use the `style()` function to specify a set of CSS styles for use with animations. You can collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`. + +
+ open and closed states +
+ +### Animation state and styles + +Use Angular's `state()` function to define different states to call at the end of each transition. This function takes two arguments: a unique name like `open` or `closed` and a `style()` function. + +Use the `style()` function to define a set of styles to associate with a given state name. Note that the style attributes must be in [*camelCase*](guide/glossary#case-conventions). + +Let's see how Angular's `state()` function works with the `style⁣­(⁠)` function to set CSS style attributes. In this code snippet, multiple style attributes are set at the same time for the state. In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a background color of yellow. + + + + +In the `closed` state, shown below, the button has a height of 100 pixels, an opacity of 0.5, and a background color of green. + + + + +### Transitions and timing + +In Angular, you can set multiple styles without any animation. However, without further refinement, the button instantly transforms with no fade, no shrinkage, or other visible indicator that a change is occurring. + +To make the change less abrupt, we need to define an animation *transition* to specify the changes that occur between one state and another over a period of time. The `transition()` function accepts two arguments: the first argument accepts an expression that defines the direction between two transition states, and the second argument accepts one or a series of `animate()` steps. + + +Use the `animate()` function to define the length, delay, and easing of a transition, and to designate the style function for defining styles while transitions are taking place. You can also use the `animate()` function to define the `keyframes()` function for multi-step animations. These definitions are placed in the second argument of the `animate()` function. + +#### Animation metadata: duration, delay, and easing + +The `animate()` function (second argument of the transition function) accepts the `timings` and `styles` input parameters. + +The `timings` parameter takes a string defined in three parts. + +>`animate ('duration delay easing')` + +The first part, `duration`, is required. The duration can be expressed in milliseconds as a simple number without quotes, or in seconds with quotes and a time specifier. For example, a duration of a tenth of a second can be expressed as follows: + +* As a plain number, in milliseconds: `100` + +* In a string, as milliseconds: `'100ms'` + +* In a string, as seconds: `'0.1s'` + +The second argument, `delay`, has the same syntax as `duration`. For example: + +* Wait for 100ms and then run for 200ms: `'0.2s 100ms'` + +The third argument, `easing`, controls how the animation [accelerates and decelerates](http://easings.net/) during its runtime. For example, `ease-in` causes the animation to begin slowly, and to pick up speed as it progresses. + +* Wait for 100ms, run for 200ms. Use a deceleration curve to start out fast and slowly decelerate to a resting point: `'0.2s 100ms ease-out'` + +* Run for 200ms, with no delay. Use a standard curve to start slow, accelerate in the middle, and then decelerate slowly at the end: `'0.2s ease-in-out'` + +* Start immediately, run for 200ms. Use an acceleration curve to start slow and end at full velocity: `'0.2s ease-in'` + +
+ +**Note:** See the Material Design website's topic on [Natural easing curves](https://material.io/design/motion/speed.html#easing) for general information on easing curves. +
+ +This example provides a state transition from `open` to `closed` with a one second transition between states. + + + + +In the code snippet above, the `=>` operator indicates unidirectional transitions, and `<=>` is bidirectional. Within the transition, `animate()` specifies how long the transition takes. In this case, the state change from `open` to `closed` takes one second, expressed here as `1s`. + +This example adds a state transition from the `closed` state to the `open` state with a 0.5 second transition animation arc. + + + + +
+ +**Note:** Some additional notes on using styles within `state` and `transition` functions. + +* Use `state()` to define styles that are applied at the end of each transition, they persist after the animation has completed. + +* Use `transition()` to define intermediate styles, which create the illusion of motion during the animation. + +* When animations are disabled, `transition()` styles can be skipped, but `state()` styles can't. + +* You can include multiple state pairs within the same `transition()` argument:
`transition( 'on => off, off => void' )`. +
+ +### Triggering the animation + +An animation requires a *trigger*, so that it knows when to start. The `trigger()` function collects the states and transitions, and gives the animation a name, so that you can attach it to the triggering element in the HTML template. + +The `trigger()` function describes the property name to watch for changes. When a change occurs, the trigger initiates the actions included in its definition. These actions can be transitions or other functions, as we'll see later on. + +In this example, we'll name the trigger `openClose`, and attach it to the `button` element. The trigger describes the open and closed states, and the timings for the two transitions. + +
+ triggering the animation +
+ +
+ +**Note:** Within each `trigger()` function call, an element can only be in one state at any given time. However, it's possible for multiple triggers to be active at once. +
+ +### Defining animations and attaching them to the HTML template + +Animations are defined in the metadata of the component that controls the HTML element to be animated. Put the code that defines your animations under the `animations:` property within the `@Component()` decorator. + + + +When you've defined an animation trigger for a component, you can attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an `@` symbol. Then, you can bind the trigger to a template expression using standard Angular property binding syntax as shown below, where `triggerName` is the name of the trigger, and `expression` evaluates to a defined animation state. + +``` +
...
; +``` + +The animation is executed or triggered when the expression value changes to a new state. + +The following code snippet binds the trigger to the value of the `isOpen` property. + + + + +In this example, when the `isOpen` expression evaluates to a defined state of `open` or `closed`, it notifies the trigger `openClose` of a state change. Then it's up to the `openClose` code to handle the state change and kick off a state change animation. + +For elements entering or leaving a page (inserted or removed from the DOM), you can make the animations conditional. For example, use `*ngIf` with the animation trigger in the HTML template. + +
+ +**Note:** In the component file, set the trigger that defines the animations as the value of the `animations:` property in the `@Component()` decorator. + +In the HTML template file, use the trigger name to attach the defined animations to the HTML element to be animated. + +
+ +### Code review + +Here are the code files discussed in the transition example. + + + + + + + + + + + + + + +### Summary + +You learned to add animation to a simple transition between two states, using `style()` and `state()` along with `animate()` for the timing. + +You can learn about more advanced features in Angular animations under the Animation section, beginning with advanced techniques in [transition and triggers](guide/transition-and-triggers). + +{@a animation-api-summary} +## Animations API summary + +The functional API provided by the `@angular/animations` module provides a domain-specific language (DSL) for creating and controlling animations in Angular applications. See the [API reference](api/animations) for a complete listing and syntax details of the core functions and related data structures. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+Function name + +What it does +
trigger()Kicks off the animation and serves as a container for all other animation function calls. HTML template binds to triggerName. Use the first argument to declare a unique trigger name. Uses array syntax.
style()Defines one or more CSS styles to use in animations. Controls the visual appearance of HTML elements during animations. Uses object syntax.
state()Creates a named set of CSS styles that should be applied on successful transition to a given state. The state can then be referenced by name within other animation functions.
animate()Specifies the timing information for a transition. Optional values for delay and easing. Can contain style() calls within.
transition()Defines the animation sequence between two named states. Uses array syntax.
keyframes()Allows a sequential change between styles within a specified time interval. Use within animate(). Can include multiple style() calls within each keyframe(). Uses array syntax.
group()Specifies a group of animation steps (inner animations) to be run in parallel. Animation continues only after all inner animation steps have completed. Used within sequence() or transition().
query()Use to find one or more inner HTML elements within the current element.
sequence()Specifies a list of animation steps that are run sequentially, one by one.
stagger()Staggers the starting time for animations for multiple elements.
animation()Produces a reusable animation that can be invoked from elsewhere. Used together with useAnimation().
useAnimation()Activates a reusable animation. Used with animation().
animateChild()Allows animations on child components to be run within the same timeframe as the parent.
+ +## More on Angular animations + +You may also be interested in the following: + +* [Transition and triggers](guide/transition-and-triggers) +* [Complex animation sequences](guide/complex-animation-sequences) +* [Reusable animations](guide/reusable-animations) +* [Route transition animations](guide/route-animations) + +
+ +Check out this full animation [demo](http://animationsftw.in/#/) with accompanying [presentation](https://www.youtube.com/watch?v=JhNo3Wvj6UQ&feature=youtu.be&t=2h47m53s), shown at the AngularConnect conference in November 2017. +
\ No newline at end of file diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index b99e9917798c..83b18050f214 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -14,133 +14,137 @@ Normalmente, las animaciones implican múltiples *transformaciones* de estilo a El sistema de animación de Angular se basa en las funcionalidades de CSS, lo que significa que puede animar cualquier propiedad que el navegador considere animable. Esto incluye posiciones, tamaños, transformaciones, colores, bordes, etc. El W3C mantiene una lista de propiedades animables en su página [CSS Transitions](https://www.w3.org/TR/css-transitions-1/). +## Acerca esta guía +Esta guía cubre las funcionalidades básicas de animación en Angular para comenzar a agregar animaciones de Angular a su proyecto. -## Sobre esta guía -Esta guía cubre las funciones básicas de animación en Angular para comenzar a agregar animaciones de Angular a su proyecto. - -Las funciones descritas en esta guía — y las funciones más avanzadas descritas en las guías de animaciones en Angular relacionadas — se muestran en una aplicación de ejemplo disponible como . +Las funcionalidades descritas en esta guía — y las funcionalidades más avanzadas descritas en las guías de animaciones en Angular relacionadas — se muestran en una aplicación de ejemplo disponible como . #### Prerequisitos - La guía asume que está familiarizado con la creación de aplicaciones básicas en Angular, como se describe en las siguientes secciones: * [Tutorial](tutorial) * [Architecture Overview](guide/architecture) +## Comenzando -## Getting started +Los principales módulos de Angular para animaciones son `@angular/animations` y `@angular/platform-browser`. Cuando crea un nuevo proyecto usando CLI, estas dependencias se agregan automáticamente a su proyecto. -The main Angular modules for animations are `@angular/animations` and `@angular/platform-browser`. When you create a new project using the CLI, these dependencies are automatically added to your project. +Para comenzar a agregar animaciones de Angular a su proyecto, importe los módulos específicos de animación junto con la funcionalidad estándar de Angular. -To get started with adding Angular animations to your project, import the animation-specific modules along with standard Angular functionality. +### Paso 1: Habilitando del módulo de animaciones -### Step 1: Enabling the animations module - -Import `BrowserAnimationsModule`, which introduces the animation capabilities into your Angular root application module. +Importa `BrowserAnimationsmodule`, que introduce las capacidades de animación en el módulo raíz de tu aplicación Angular.
-**Note:** When you use the CLI to create your app, the root application module `app.module.ts` is placed in the `src/app` folder. +**Nota:** Cuando usas CLI para crear tu aplicación, el módulo raíz de la aplicación `app.module.ts` se coloca en la carpeta `src/app`. +
-### Step 2: Importing animation functions into component files +### Paso 2: Importando funciones de animación en componentes -If you plan to use specific animation functions in component files, import those functions from `@angular/animations`. +Si planea usar funciones específicas de animación en componentes, importe esas funciones desde `@angular/animations`.
-**Note:** See a [summary of available animation functions](guide/animations#animation-api-summary) at the end of this guide. +**Nota:** Ver una [summary of available animation functions](guide/animations#animation-api-summary) al final de esta guía.
-### Step 3: Adding the animation metadata property +### Paso 3: Agregando la propiedad metadatos a la animación -In the component file, add a metadata property called `animations:` within the `@Component()` decorator. You put the trigger that defines an animation within the `animations` metadata property. +En el archivo del componente, agrega la propiedad de metadatos llamada `animations:` dentro del decorador `@Component()`. + +Pon este disparador que define una animación dentro de la propiedad de metadatos `animaciones`. -## Animating a simple transition +## Animando una transición simple -Let's animate a simple transition that changes a single HTML element from one state to another. For example, you can specify that a button displays either **Open** or **Closed** based on the user's last action. When the button is in the `open` state, it's visible and yellow. When it's the `closed` state, it's transparent and green. +Vamos a animar una transición simple que cambia un solo elemento HTML de un estado a otro. Por ejemplo, puede especificar que un botón muestre **Open** o **Closed** basado en la última acción del usuario. Cuando el botón está en el estado "Open", es visible y amarillo. Cuando es el estado "Closed", es transparente y verde. -In HTML, these attributes are set using ordinary CSS styles such as color and opacity. In Angular, use the `style()` function to specify a set of CSS styles for use with animations. You can collect a set of styles in an animation state, and give the state a name, such as `open` or `closed`. +En HTML, estos atributos se establecen habitualmente mediante estilos CSS, como el color y la opacidad. En Angular, use la función `style()` para especificar un conjunto de estilos CSS para usar con animaciones. Puede recopilar un conjunto de estilos en un estado de animación y darle un nombre al estado, como "open" o "closed".
open and closed states
-### Animation state and styles +### Animación, estados y estilos -Use Angular's `state()` function to define different states to call at the end of each transition. This function takes two arguments: a unique name like `open` or `closed` and a `style()` function. +Use la función `state ()` de Angular para definir diferentes estados para llamar al final de cada transición. Esta función toma dos argumentos: un nombre único como `open` o `closed` y una función `style()`. -Use the `style()` function to define a set of styles to associate with a given state name. Note that the style attributes must be in [*camelCase*](guide/glossary#case-conventions). +Utilice la función `style ()` para definir un conjunto de estilos para asociarlos con un nombre de estado dado. Tenga en cuenta que los atributos de estilo deben estar en[*camelCase*](guide/glossary#case-conventions). -Let's see how Angular's `state()` function works with the `style⁣­(⁠)` function to set CSS style attributes. In this code snippet, multiple style attributes are set at the same time for the state. In the `open` state, the button has a height of 200 pixels, an opacity of 1, and a background color of yellow. +Vamos a ver como funciona la función `state()` de Angular trabajando con la función `style()` para establecer atributos de estilo CSS. En este fragmento de código, se establecen varios atributos de estilo al mismo tiempo para el estado. +En el estado `open`, el botón tiene una altura de 200 píxeles, una opacidad de 1 y un color de fondo amarillo. -In the `closed` state, shown below, the button has a height of 100 pixels, an opacity of 0.5, and a background color of green. +En el estado "`closed`, que se muestra a continuación, el botón tiene una altura de 100 píxeles, una opacidad de 0,5 y un color de fondo verde. -### Transitions and timing +### Transiciones y sincronización + +En Angular, puede establecer varios estilos sin ninguna animación. Sin embargo, sin más refinamiento, el botón se transforma instantáneamente sin desvanecimiento, sin encogimiento u otro indicador visible de que se está produciendo un cambio. -In Angular, you can set multiple styles without any animation. However, without further refinement, the button instantly transforms with no fade, no shrinkage, or other visible indicator that a change is occurring. +Para que el cambio sea menos abrupto, necesitamos definir una animación *transition* para especificar los cambios que ocurren entre un estado y otro durante un período de tiempo. La función `transition()` acepta dos argumentos: el primer argumento acepta una expresión que define la dirección entre dos estados de transición, +y el segundo argumento acepta uno o una serie de pasos de `animate()`. -To make the change less abrupt, we need to define an animation *transition* to specify the changes that occur between one state and another over a period of time. The `transition()` function accepts two arguments: the first argument accepts an expression that defines the direction between two transition states, and the second argument accepts one or a series of `animate()` steps. +Use la función `animate()` para definir la duración, el retraso y la suavización de una transición, y para designar la función de estilo para definir estilos mientras se realizan las transiciones. También puede utilizar la función `animate()` para definir la función `keyframes()` para animaciones de varios pasos. Estas definiciones se colocan en el segundo argumento de la función `animate()`. -Use the `animate()` function to define the length, delay, and easing of a transition, and to designate the style function for defining styles while transitions are taking place. You can also use the `animate()` function to define the `keyframes()` function for multi-step animations. These definitions are placed in the second argument of the `animate()` function. -#### Animation metadata: duration, delay, and easing +#### Metadatos de animación: duración, retraso y suavizado -The `animate()` function (second argument of the transition function) accepts the `timings` and `styles` input parameters. +La función `animate()` (Segundo argumento de la función transition) acepta los parámetros de entrada `timings` y `styles`. -The `timings` parameter takes a string defined in three parts. +El parametro `timings` toma un string definido en tres partes. >`animate ('duration delay easing')` -The first part, `duration`, is required. The duration can be expressed in milliseconds as a simple number without quotes, or in seconds with quotes and a time specifier. For example, a duration of a tenth of a second can be expressed as follows: +La primera parte, `duration`, es requerrida. La duración se puede expresar en milisegundos como un simple número sin comillas, o en segundos con comillas y un tiempo específico. Por ejemplo, una duración de una décima de segundo se puede expresar de la siguiente manera: -* As a plain number, in milliseconds: `100` +* Como un número plano, en milisegundos: `100` -* In a string, as milliseconds: `'100ms'` +* En un string, como milisegundos: `'100ms'` -* In a string, as seconds: `'0.1s'` +* En un string, como segundos: `'0.1s'` -The second argument, `delay`, has the same syntax as `duration`. For example: +El segundo argumento, `delay`, tiene la misma sintaxis que `duration`. Por ejemplo: -* Wait for 100ms and then run for 200ms: `'0.2s 100ms'` +* Espere 100ms y luego ejecute por 200ms: `'0.2s 100ms'` -The third argument, `easing`, controls how the animation [accelerates and decelerates](http://easings.net/) during its runtime. For example, `ease-in` causes the animation to begin slowly, and to pick up speed as it progresses. +El tercer argumento, `easing`, controla cómo la animación [acelera y desacelera](http://easings.net/) durante su tiempo de ejecución. Por ejemplo, `ease-in` hace que la animación comience lentamente y aumente la velocidad a medida que avanza. -* Wait for 100ms, run for 200ms. Use a deceleration curve to start out fast and slowly decelerate to a resting point: `'0.2s 100ms ease-out'` +* Esperar por 100ms, correr por 200ms. Use una curva de desaceleración para comenzar rápido y desacelere lentamente hasta un punto de reposo: `'0.2s 100ms ease-out'` -* Run for 200ms, with no delay. Use a standard curve to start slow, accelerate in the middle, and then decelerate slowly at the end: `'0.2s ease-in-out'` +* correr por 200ms, sin demora. Use una curva estándar para comenzar lento, acelerar en el medio y luego desacelerar lentamente al final: `'0.2s ease-in-out'` -* Start immediately, run for 200ms. Use an acceleration curve to start slow and end at full velocity: `'0.2s ease-in'` +* Comenzar de inmediato, correr por 200ms. Use una curva de aceleración para comenzar lento y terminar a máxima velocidad: `'0.2s ease-in'`
-**Note:** See the Material Design website's topic on [Natural easing curves](https://material.io/design/motion/speed.html#easing) for general information on easing curves. +**Nota:** Consulte el tema en el sitio web de Material Design como [Curvas de suavizado natural](https://material.io/design/motion/speed.html#easing) para obtener información general sobre curvas de flexión.
-This example provides a state transition from `open` to `closed` with a one second transition between states. +Este ejemplo proporciona una transición de estado de `open` a `closed` con una transición de un segundo entre estados. -In the code snippet above, the `=>` operator indicates unidirectional transitions, and `<=>` is bidirectional. Within the transition, `animate()` specifies how long the transition takes. In this case, the state change from `open` to `closed` takes one second, expressed here as `1s`. -This example adds a state transition from the `closed` state to the `open` state with a 0.5 second transition animation arc. +En el fragmento de código anterior, el operador `=>` indica transiciones unidireccionales y `<=>` es bidireccional. Dentro de la transición, `animate ()` especifica cuánto tiempo lleva la transición. En este caso, el cambio de estado de `open` a `closed` toma un segundo, expresado aquí como `1s`. + +Este ejemplo agrega una transición de estado del estado `closed` al estado `open` con un arco de animación de transición de 0,5 segundos. @@ -148,24 +152,24 @@ region="transition2">
-**Note:** Some additional notes on using styles within `state` and `transition` functions. +**Nota:** Algunas notas adicionales sobre el uso de estilos dentro de las funciones de `state` y `transition`. -* Use `state()` to define styles that are applied at the end of each transition, they persist after the animation has completed. +* Use `state()` para definir los estilos que se aplican al final de cada transición, estos persisten después de que se completa la animación. -* Use `transition()` to define intermediate styles, which create the illusion of motion during the animation. +* Utilice `transition()` para definir estilos intermedios, que crean la ilusión de movimiento durante la animación. -* When animations are disabled, `transition()` styles can be skipped, but `state()` styles can't. +* Cuando las animaciones están deshabilitadas, los estilos `transition()` se pueden omitir, pero los estilos `state()` no. -* You can include multiple state pairs within the same `transition()` argument:
`transition( 'on => off, off => void' )`. +* Puede incluir varios pares de estados dentro del mismo argumento `transition()`:
`transition( 'on => off, off => void' )`.
-### Triggering the animation +### Activando la animación -An animation requires a *trigger*, so that it knows when to start. The `trigger()` function collects the states and transitions, and gives the animation a name, so that you can attach it to the triggering element in the HTML template. +Una animación requiere un *disparador*, para que sepa cuándo comenzar. La función `trigger()` recopila los estados y las transiciones, y le da un nombre a la animación, para que pueda adjuntarlo al elemento desencadenante en la plantilla HTML. -The `trigger()` function describes the property name to watch for changes. When a change occurs, the trigger initiates the actions included in its definition. These actions can be transitions or other functions, as we'll see later on. +La función `trigger()` describe el nombre de la propiedad para observar los cambios. Cuando ocurre un cambio, el disparador inicia las acciones incluidas en su definición. Estas acciones pueden ser transiciones u otras funciones, como veremos más adelante. -In this example, we'll name the trigger `openClose`, and attach it to the `button` element. The trigger describes the open and closed states, and the timings for the two transitions. +En este ejemplo, nombraremos el disparador `openClose` y lo adjuntaremos al elemento `button`. El disparador describe los estados open y closed, y los tiempos para las dos transiciones.
triggering the animation @@ -173,44 +177,44 @@ In this example, we'll name the trigger `openClose`, and attach it to the `butto
-**Note:** Within each `trigger()` function call, an element can only be in one state at any given time. However, it's possible for multiple triggers to be active at once. +**Nota:** Dentro de cada llamada a la función `trigger()`, un elemento solo puede estar en un estado en un momento dado. Sin embargo, es posible que varios desencadenantes estén activos a la vez.
-### Defining animations and attaching them to the HTML template +### Definir animaciones y adjuntarlas a la plantilla HTML -Animations are defined in the metadata of the component that controls the HTML element to be animated. Put the code that defines your animations under the `animations:` property within the `@Component()` decorator. +Las animaciones se definen en los metadatos del componente que controla el elemento HTML a animar. Ponga el código que define sus animaciones debajo de la propiedad `animations:` dentro del decorador `@Component()`. -When you've defined an animation trigger for a component, you can attach it to an element in that component's template by wrapping the trigger name in brackets and preceding it with an `@` symbol. Then, you can bind the trigger to a template expression using standard Angular property binding syntax as shown below, where `triggerName` is the name of the trigger, and `expression` evaluates to a defined animation state. +Cuando haya definido un disparador de animación para un componente, puede adjuntarlo a un elemento en la plantilla de ese componente colocando el nombre del disparador entre paréntesis y precediéndolo con un símbolo `@`. Luego, puede vincular el disparador a una expresión de plantilla utilizando la sintaxis de enlace estandar en Angular como se muestra a continuación, Donde `triggerName` es el nombre del disparador, y `expression` evalúa un estado definido de la animación. ```
...
; ``` -The animation is executed or triggered when the expression value changes to a new state. +La animación se ejecuta o activa cuando el valor de la expresión cambia a un nuevo estado. -The following code snippet binds the trigger to the value of the `isOpen` property. +El siguiente fragmento de código vincula el disparador con el el valor de la propiedad `isOpen`. -In this example, when the `isOpen` expression evaluates to a defined state of `open` or `closed`, it notifies the trigger `openClose` of a state change. Then it's up to the `openClose` code to handle the state change and kick off a state change animation. +En este ejemplo, cuando la expresión `isOpen` evalúa el estado definido de `open` o `closed`, esto notifica al disparador `openClose` de un cambio de estado. Entonces depende del código `openClose` manejar el cambio de estado e iniciar una animación de cambio de estado. -For elements entering or leaving a page (inserted or removed from the DOM), you can make the animations conditional. For example, use `*ngIf` with the animation trigger in the HTML template. +Para los elementos que entran o salen de una página (insertados o eliminados del DOM), puede hacer que las animaciones sean condicionales. Por ejemplo, use `*ngIf` con el disparador de animación en la plantilla HTML.
-**Note:** In the component file, set the trigger that defines the animations as the value of the `animations:` property in the `@Component()` decorator. +**Nota:** En el componente, establezca el disparador que define las animaciones como el valor de la propiedad `animations:` en el decorador `@Component ()`. -In the HTML template file, use the trigger name to attach the defined animations to the HTML element to be animated. +En el archivo de la plantilla HTML, use el nombre del disparador para adjuntar las animaciones definidas al elemento HTML que se va a animar.
-### Code review +### Revisión de código -Here are the code files discussed in the transition example. +Aquí están los archivos de código tratados en el ejemplo de transición. @@ -227,37 +231,36 @@ region="trigger"> -### Summary +### Resumen -You learned to add animation to a simple transition between two states, using `style()` and `state()` along with `animate()` for the timing. +Aprendió a agregar animación a una transición simple entre dos estados, usando `style()` y `state()` junto con `animate()` para la sincronización. -You can learn about more advanced features in Angular animations under the Animation section, beginning with advanced techniques in [transition and triggers](guide/transition-and-triggers). +Puede aprender funciones de animaciones avanzada en Angular en la sección Animación, comenzando con técnicas avanzadas en [transition and triggers](guide/transition-and-triggers). {@a animation-api-summary} -## Animations API summary - -The functional API provided by the `@angular/animations` module provides a domain-specific language (DSL) for creating and controlling animations in Angular applications. See the [API reference](api/animations) for a complete listing and syntax details of the core functions and related data structures. +## Resumen de la API de animaciones +La API funcional proporcionada por el módulo `@angular/animations` provee un lenguaje de dominio específico (DSL) para crear y controlar animaciones en aplicaciones Angular. Mire la [API reference](api/animations) o una lista completa y detalles de sintaxis de las funciones principales y estructuras de datos relacionadas. - + - + @@ -267,17 +270,17 @@ What it does - + - + - + @@ -328,5 +331,5 @@ You may also be interested in the following:
-Check out this full animation [demo](http://animationsftw.in/#/) with accompanying [presentation](https://www.youtube.com/watch?v=JhNo3Wvj6UQ&feature=youtu.be&t=2h47m53s), shown at the AngularConnect conference in November 2017. +Check out this full animation [demo](http://animationsftw.in/#/) with accompanying [presentation](https://www.youtube.com/watch?v=JhNo3Wvj6UQ&funcionalidad=youtu.be&t=2h47m53s), shown at the AngularConnect conference in November 2017.
From 3d4a946e6254ff1ea6ac65f10a15a1ba872e5d1e Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Fri, 16 Apr 2021 18:56:06 -0300 Subject: [PATCH 03/39] docs: translate animations.md completed --- aio/content/guide/animations.md | 46 ++++++++++++++++----------------- 1 file changed, 23 insertions(+), 23 deletions(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 83b18050f214..dcf619701f77 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -12,7 +12,7 @@ Las animaciones bien diseñadas pueden hacer que su aplicación sea más diverti Normalmente, las animaciones implican múltiples *transformaciones* de estilo a lo largo del tiempo. Un elemento HTML puede moverse, cambiar de color, crecer o encogerse, desvanecerse o deslizarse fuera de la página. Estos cambios pueden ocurrir de forma simultánea o secuencial. Usted puede controlar el momento de cada transformación. El sistema de animación de Angular se basa en las funcionalidades de CSS, lo que significa que puede animar cualquier propiedad que el navegador considere animable. Esto incluye posiciones, tamaños, transformaciones, colores, bordes, etc. El W3C mantiene una lista de propiedades animables en su página -[CSS Transitions](https://www.w3.org/TR/css-transitions-1/). +[Transiciones CSS](https://www.w3.org/TR/css-transitions-1/). ## Acerca esta guía Esta guía cubre las funcionalidades básicas de animación en Angular para comenzar a agregar animaciones de Angular a su proyecto. @@ -23,7 +23,7 @@ Las funcionalidades descritas en esta guía — y las funcionalidades más a La guía asume que está familiarizado con la creación de aplicaciones básicas en Angular, como se describe en las siguientes secciones: * [Tutorial](tutorial) -* [Architecture Overview](guide/architecture) +* [Información sobre la arquitectura](guide/architecture) ## Comenzando @@ -52,7 +52,7 @@ Si planea usar funciones específicas de animación en componentes, importe esas
-**Nota:** Ver una [summary of available animation functions](guide/animations#animation-api-summary) al final de esta guía. +**Nota:** Ver [resumen de las funciones de animación disponibles](guide/animations#animation-api-summary) al final de esta guía.
### Paso 3: Agregando la propiedad metadatos a la animación @@ -76,9 +76,9 @@ En HTML, estos atributos se establecen habitualmente mediante estilos CSS, como ### Animación, estados y estilos -Use la función `state ()` de Angular para definir diferentes estados para llamar al final de cada transición. Esta función toma dos argumentos: un nombre único como `open` o `closed` y una función `style()`. +Use la función `state()` de Angular para definir diferentes estados para llamar al final de cada transición. Esta función toma dos argumentos: un nombre único como `open` o `closed` y una función `style()`. -Utilice la función `style ()` para definir un conjunto de estilos para asociarlos con un nombre de estado dado. Tenga en cuenta que los atributos de estilo deben estar en[*camelCase*](guide/glossary#case-conventions). +Utilice la función `style()` para definir un conjunto de estilos para asociarlos con un nombre de estado dado. Tenga en cuenta que los atributos de estilo deben estar en[*camelCase*](guide/glossary#case-conventions). Vamos a ver como funciona la función `state()` de Angular trabajando con la función `style()` para establecer atributos de estilo CSS. En este fragmento de código, se establecen varios atributos de estilo al mismo tiempo para el estado. En el estado `open`, el botón tiene una altura de 200 píxeles, una opacidad de 1 y un color de fondo amarillo. @@ -86,7 +86,7 @@ En el estado `open`, el botón tiene una altura de 200 píxeles, una opacidad de -En el estado "`closed`, que se muestra a continuación, el botón tiene una altura de 100 píxeles, una opacidad de 0,5 y un color de fondo verde. +En el estado `closed`, que se muestra a continuación, el botón tiene una altura de 100 píxeles, una opacidad de 0,5 y un color de fondo verde. @@ -108,7 +108,7 @@ La función `animate()` (Segundo argumento de la función transition) acepta los El parametro `timings` toma un string definido en tres partes. ->`animate ('duration delay easing')` +>`animate('duration delay easing')` La primera parte, `duration`, es requerrida. La duración se puede expresar en milisegundos como un simple número sin comillas, o en segundos con comillas y un tiempo específico. Por ejemplo, una duración de una décima de segundo se puede expresar de la siguiente manera: @@ -235,7 +235,7 @@ region="trigger"> Aprendió a agregar animación a una transición simple entre dos estados, usando `style()` y `state()` junto con `animate()` para la sincronización. -Puede aprender funciones de animaciones avanzada en Angular en la sección Animación, comenzando con técnicas avanzadas en [transition and triggers](guide/transition-and-triggers). +Puede aprender funciones de animaciones avanzada en Angular en la sección Animación, comenzando con técnicas avanzadas en [Transición y disparadores](guide/transition-and-triggers). {@a animation-api-summary} ## Resumen de la API de animaciones @@ -265,7 +265,7 @@ Nombre de la función - + @@ -285,51 +285,51 @@ Nombre de la función - + - + - + - + - + - + - +
-Function name +Nombre de la función -What it does +¿Qué hace?
trigger()Kicks off the animation and serves as a container for all other animation function calls. HTML template binds to triggerName. Use the first argument to declare a unique trigger name. Uses array syntax.Inicia la animación y sirve como contenedor para todas las demás llamadas a funciones de animación. La plantilla HTML se une a triggerName. Utilice el primer argumento para declarar un nombre de disparador único. Utiliza sintaxis de array.
style()Defines one or more CSS styles to use in animations. Controls the visual appearance of HTML elements during animations. Uses object syntax.Define uno o más estilos CSS para usar en animaciones. Controla la apariencia visual de los elementos HTML durante las animaciones. Utiliza la sintaxis de Object
animate()Specifies the timing information for a transition. Optional values for delay and easing. Can contain style() calls within.Especifica la información de tiempo para una transición. Valores opcionales para delay y easing. Puede contener llamadas a style() dentro.
transition()Defines the animation sequence between two named states. Uses array syntax.Define la secuencia de animación entre dos estados con nombre. Utiliza sintaxis de array
keyframes()Allows a sequential change between styles within a specified time interval. Use within animate(). Can include multiple style() calls within each keyframe(). Uses array syntax.Permite un cambio secuencial entre estilos dentro de un intervalo de tiempo específico. Usa dentro animate(). Puede incluir dentro multiples llamadas style() dentro de cada keyframe(). Use la sintasis de array.
state()Creates a named set of CSS styles that should be applied on successful transition to a given state. The state can then be referenced by name within other animation functions.Crea un conjunto con nombre de estilos CSS que se deben aplicar en una transición exitosa a un estado dado. A continuación, se puede hacer referencia al estado por su nombre dentro de otras funciones de animación.
group()Specifies a group of animation steps (inner animations) to be run in parallel. Animation continues only after all inner animation steps have completed. Used within sequence() or transition().Especifica un grupo de animaciones internas de pasos (de animación) que se ejecutarán en paralelo. La animación continúa solo después de que se hayan completado todos los pasos de la animación interna. Usado dentro de sequence() o transition().
query()Use to find one or more inner HTML elements within the current element. Úselo para buscar uno o más elementos HTML internos dentro del elemento actual.
sequence()Specifies a list of animation steps that are run sequentially, one by one.Especifica una lista de pasos de animación que se ejecutan secuencialmente, uno por uno.
stagger()Staggers the starting time for animations for multiple elements.Escalona la hora de inicio de las animaciones de varios elementos.
animation()Produces a reusable animation that can be invoked from elsewhere. Used together with useAnimation().Produce una animación reutilizable que se puede invocar desde otro lugar. Usado junto con useAnimation().
useAnimation()Activates a reusable animation. Used with animation().Activa una animación reutilizable. Usado con animation().
animateChild()Allows animations on child components to be run within the same timeframe as the parent.Permite que las animaciones de los componentes secundarios se ejecuten dentro del mismo período de tiempo que el principal.
-## More on Angular animations +## Más sobre animaciones Angular -You may also be interested in the following: +También te puede interesar lo siguiente: -* [Transition and triggers](guide/transition-and-triggers) -* [Complex animation sequences](guide/complex-animation-sequences) -* [Reusable animations](guide/reusable-animations) -* [Route transition animations](guide/route-animations) +* [Transición y disparadores](guide/transition-and-triggers) +* [Secuencias de animación complejas](guide/complex-animation-sequences) +* [Animaciones reutilizables](guide/reusable-animations) +* [Animaciones de transición de ruta](guide/route-animations)
-Check out this full animation [demo](http://animationsftw.in/#/) with accompanying [presentation](https://www.youtube.com/watch?v=JhNo3Wvj6UQ&funcionalidad=youtu.be&t=2h47m53s), shown at the AngularConnect conference in November 2017. +Mira esta animación completa [demo](http://animationsftw.in/#/) junto con la [presentación](https://www.youtube.com/watch?v=JhNo3Wvj6UQ&funcionalidad=youtu.be&t=2h47m53s), mostrado en la conferencia AngularConnect en noviembre de 2017.
From 964e1f17eba6c7cf6cd21980256302be01278f33 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:36:01 -0300 Subject: [PATCH 04/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Se cambia el sujeto de 'su' a 'tu' Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index dcf619701f77..578be7e2f94f 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -1,7 +1,7 @@ # Introducción a las animaciones en Angular La animación proporciona la ilusión de movimiento: los elementos HTML cambian de estilo con el tiempo. -Las animaciones bien diseñadas pueden hacer que su aplicación sea más divertida y fácil de usar, pero no son sólo un decorado. Las animaciones pueden mejorar su aplicación y la experiencia del usuario de varias formas: +Las animaciones bien diseñadas pueden hacer que tu aplicación sea más divertida y fácil de usar, pero no son sólo un decorado. Las animaciones pueden mejorar tu aplicación y la experiencia del usuario de varias formas: * Sin animaciones, las transiciones de páginas web pueden parecer abruptas y discordantes. From b6cd1ebf0cab2a86398a5a1c41e27e46c8bc13f9 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:36:54 -0300 Subject: [PATCH 05/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Se cambia 'le dan' por 'brindan a los usuarios' Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 578be7e2f94f..8acce39da81b 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -5,7 +5,7 @@ Las animaciones bien diseñadas pueden hacer que tu aplicación sea más diverti * Sin animaciones, las transiciones de páginas web pueden parecer abruptas y discordantes. -* El movimiento mejora en gran medida la experiencia del usuario, por lo que las animaciones les dan la oportunidad de detectar la respuesta de la aplicación a sus acciones. +* El movimiento mejora en gran medida la experiencia del usuario, por lo que las animaciones brindan a los usuarios la oportunidad de detectar la respuesta de la aplicación a sus acciones. * Las buenas animaciones llaman la atención del usuario de forma intuitiva hacia donde se necesita. From 33d1ce8e45f39ae128d32bf75e67609ba5603d5f Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:37:39 -0300 Subject: [PATCH 06/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Se cambia el sujeto por 'tu' Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 8acce39da81b..ac8db13b4c1d 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -9,7 +9,7 @@ Las animaciones bien diseñadas pueden hacer que tu aplicación sea más diverti * Las buenas animaciones llaman la atención del usuario de forma intuitiva hacia donde se necesita. -Normalmente, las animaciones implican múltiples *transformaciones* de estilo a lo largo del tiempo. Un elemento HTML puede moverse, cambiar de color, crecer o encogerse, desvanecerse o deslizarse fuera de la página. Estos cambios pueden ocurrir de forma simultánea o secuencial. Usted puede controlar el momento de cada transformación. +Normalmente, las animaciones implican múltiples *transformaciones* de estilo a lo largo del tiempo. Un elemento HTML puede moverse, cambiar de color, crecer o encogerse, desvanecerse o deslizarse fuera de la página. Estos cambios pueden ocurrir de forma simultánea o secuencial. Puedes controlar el momento de cada transformación. El sistema de animación de Angular se basa en las funcionalidades de CSS, lo que significa que puede animar cualquier propiedad que el navegador considere animable. Esto incluye posiciones, tamaños, transformaciones, colores, bordes, etc. El W3C mantiene una lista de propiedades animables en su página [Transiciones CSS](https://www.w3.org/TR/css-transitions-1/). From 03c547558a64343939bfeb88eb0cbadb9eab0f9e Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:38:09 -0300 Subject: [PATCH 07/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Se cambias por ´tu´ Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index ac8db13b4c1d..3c27f10e714e 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -11,7 +11,7 @@ Las animaciones bien diseñadas pueden hacer que tu aplicación sea más diverti Normalmente, las animaciones implican múltiples *transformaciones* de estilo a lo largo del tiempo. Un elemento HTML puede moverse, cambiar de color, crecer o encogerse, desvanecerse o deslizarse fuera de la página. Estos cambios pueden ocurrir de forma simultánea o secuencial. Puedes controlar el momento de cada transformación. -El sistema de animación de Angular se basa en las funcionalidades de CSS, lo que significa que puede animar cualquier propiedad que el navegador considere animable. Esto incluye posiciones, tamaños, transformaciones, colores, bordes, etc. El W3C mantiene una lista de propiedades animables en su página +El sistema de animación de Angular se basa en las funcionalidades de CSS, lo que significa que puedes animar cualquier propiedad que el navegador considere animable. Esto incluye posiciones, tamaños, transformaciones, colores, bordes, etc. El W3C mantiene una lista de propiedades animables en tu página [Transiciones CSS](https://www.w3.org/TR/css-transitions-1/). ## Acerca esta guía From ed0d5503d77682ec4a89a28565c25ad831160b03 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:38:32 -0300 Subject: [PATCH 08/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Se agrega 'de' Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 3c27f10e714e..e728aa277174 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -14,7 +14,7 @@ Normalmente, las animaciones implican múltiples *transformaciones* de estilo a El sistema de animación de Angular se basa en las funcionalidades de CSS, lo que significa que puedes animar cualquier propiedad que el navegador considere animable. Esto incluye posiciones, tamaños, transformaciones, colores, bordes, etc. El W3C mantiene una lista de propiedades animables en tu página [Transiciones CSS](https://www.w3.org/TR/css-transitions-1/). -## Acerca esta guía +## Acerca de esta guía Esta guía cubre las funcionalidades básicas de animación en Angular para comenzar a agregar animaciones de Angular a su proyecto. Las funcionalidades descritas en esta guía — y las funcionalidades más avanzadas descritas en las guías de animaciones en Angular relacionadas — se muestran en una aplicación de ejemplo disponible como . From 58a5541dd9459029eeb0344fc582c97510146460 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:39:33 -0300 Subject: [PATCH 09/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Cambio de sujeto tácito Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index e728aa277174..7ca0b70a3823 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -208,7 +208,7 @@ Para los elementos que entran o salen de una página (insertados o eliminados de **Nota:** En el componente, establezca el disparador que define las animaciones como el valor de la propiedad `animations:` en el decorador `@Component ()`. -En el archivo de la plantilla HTML, use el nombre del disparador para adjuntar las animaciones definidas al elemento HTML que se va a animar. +En el archivo de la plantilla HTML, usa el nombre del disparador para adjuntar las animaciones definidas al elemento HTML que se va a animar.
From d5c5275af56cef204ace005c0f567958f680cd94 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:40:03 -0300 Subject: [PATCH 10/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Cambio de sujeto por 'tu' Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 7ca0b70a3823..35b02358f278 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -233,7 +233,7 @@ region="trigger"> ### Resumen -Aprendió a agregar animación a una transición simple entre dos estados, usando `style()` y `state()` junto con `animate()` para la sincronización. +Aprendiste a agregar una animación a una transición simple entre dos estados, usando `style()` y `state()` junto con `animate()` para la sincronización. Puede aprender funciones de animaciones avanzada en Angular en la sección Animación, comenzando con técnicas avanzadas en [Transición y disparadores](guide/transition-and-triggers). From 3a36ad7ea9f1462e7c760a2c68da2e76e8497158 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:40:44 -0300 Subject: [PATCH 11/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Cambio de sujeto por 'tu' Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 35b02358f278..19e558960e1f 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -235,7 +235,7 @@ region="trigger"> Aprendiste a agregar una animación a una transición simple entre dos estados, usando `style()` y `state()` junto con `animate()` para la sincronización. -Puede aprender funciones de animaciones avanzada en Angular en la sección Animación, comenzando con técnicas avanzadas en [Transición y disparadores](guide/transition-and-triggers). +Puedes aprender funciones de animaciones avanzada en Angular en la sección Animación, comenzando con técnicas avanzadas en [Transición y disparadores](guide/transition-and-triggers). {@a animation-api-summary} ## Resumen de la API de animaciones From 389d7682e0c7fa5eb2ccb62846f9851de66eecbd Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:41:06 -0300 Subject: [PATCH 12/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Cambio de sujeto por 'tu' Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 19e558960e1f..af1ecdbe3bee 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -255,7 +255,7 @@ Nombre de la función trigger() -Inicia la animación y sirve como contenedor para todas las demás llamadas a funciones de animación. La plantilla HTML se une a triggerName. Utilice el primer argumento para declarar un nombre de disparador único. Utiliza sintaxis de array. +Inicia la animación y sirve como contenedor para todas las demás llamadas a funciones de animación. La plantilla HTML se une a triggerName. Utiliza el primer argumento para declarar un nombre de disparador único. Utiliza sintaxis de array. From a793af686a94e0e0de739a671cac041bac9ad2ee Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:42:13 -0300 Subject: [PATCH 13/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit agreagada tilde en 'múltiples' y cambio de sujeto en 'use' por 'usa' Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index af1ecdbe3bee..6be8a2d816d6 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -280,7 +280,7 @@ Nombre de la función keyframes() -Permite un cambio secuencial entre estilos dentro de un intervalo de tiempo específico. Usa dentro animate(). Puede incluir dentro multiples llamadas style() dentro de cada keyframe(). Use la sintasis de array. +Permite un cambio secuencial entre estilos dentro de un intervalo de tiempo específico. Usa dentro animate(). Puede incluir dentro múltiples llamadas style() dentro de cada keyframe(). Usa la sintasis de array. From 42aca991a896850b0b1146aae38c673a48c654da Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:44:31 -0300 Subject: [PATCH 14/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 6be8a2d816d6..0cec95421ebe 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -126,7 +126,7 @@ El tercer argumento, `easing`, controla cómo la animación [acelera y desaceler * Esperar por 100ms, correr por 200ms. Use una curva de desaceleración para comenzar rápido y desacelere lentamente hasta un punto de reposo: `'0.2s 100ms ease-out'` -* correr por 200ms, sin demora. Use una curva estándar para comenzar lento, acelerar en el medio y luego desacelerar lentamente al final: `'0.2s ease-in-out'` +* Corre por 200ms, sin demora. Usa una curva estándar para comenzar lento, acelerar en el medio y luego desacelerar lentamente al final: `'0.2s ease-in-out'` * Comenzar de inmediato, correr por 200ms. Use una curva de aceleración para comenzar lento y terminar a máxima velocidad: `'0.2s ease-in'` From 6906e71665cb662335646a79a748ee5b365e9794 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:44:44 -0300 Subject: [PATCH 15/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 0cec95421ebe..5e327f1b6119 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -15,7 +15,7 @@ El sistema de animación de Angular se basa en las funcionalidades de CSS, lo q [Transiciones CSS](https://www.w3.org/TR/css-transitions-1/). ## Acerca de esta guía -Esta guía cubre las funcionalidades básicas de animación en Angular para comenzar a agregar animaciones de Angular a su proyecto. +Esta guía cubre las funcionalidades básicas de animación en Angular para comenzar a agregar animaciones de Angular a tu proyecto. Las funcionalidades descritas en esta guía — y las funcionalidades más avanzadas descritas en las guías de animaciones en Angular relacionadas — se muestran en una aplicación de ejemplo disponible como . From b122cac638aa06cb12c009cccc565861a5f88ce3 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:44:56 -0300 Subject: [PATCH 16/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 5e327f1b6119..7da91a3f5263 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -20,7 +20,7 @@ Esta guía cubre las funcionalidades básicas de animación en Angular para come Las funcionalidades descritas en esta guía — y las funcionalidades más avanzadas descritas en las guías de animaciones en Angular relacionadas — se muestran en una aplicación de ejemplo disponible como . #### Prerequisitos -La guía asume que está familiarizado con la creación de aplicaciones básicas en Angular, como se describe en las siguientes secciones: +La guía asume que estás familiarizado con la creación de aplicaciones básicas en Angular, como se describe en las siguientes secciones: * [Tutorial](tutorial) * [Información sobre la arquitectura](guide/architecture) From 261ac3f1de3897aea630a9d89313f95e0b7ad1a6 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:45:07 -0300 Subject: [PATCH 17/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 7da91a3f5263..7ba40be4d1c7 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -27,7 +27,7 @@ La guía asume que estás familiarizado con la creación de aplicaciones básica ## Comenzando -Los principales módulos de Angular para animaciones son `@angular/animations` y `@angular/platform-browser`. Cuando crea un nuevo proyecto usando CLI, estas dependencias se agregan automáticamente a su proyecto. +Los principales módulos de Angular para animaciones son `@angular/animations` y `@angular/platform-browser`. Cuando creas un nuevo proyecto usando CLI, estas dependencias se agregan automáticamente a tu proyecto. Para comenzar a agregar animaciones de Angular a su proyecto, importe los módulos específicos de animación junto con la funcionalidad estándar de Angular. From 015f0b1970db3beeff540e61264dc4cfc6b7b14d Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:45:16 -0300 Subject: [PATCH 18/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 7ba40be4d1c7..7a2d0054864a 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -29,7 +29,7 @@ La guía asume que estás familiarizado con la creación de aplicaciones básica Los principales módulos de Angular para animaciones son `@angular/animations` y `@angular/platform-browser`. Cuando creas un nuevo proyecto usando CLI, estas dependencias se agregan automáticamente a tu proyecto. -Para comenzar a agregar animaciones de Angular a su proyecto, importe los módulos específicos de animación junto con la funcionalidad estándar de Angular. +Para comenzar a agregar animaciones de Angular a su proyecto, importa los módulos específicos de animación junto con la funcionalidad estándar de Angular. ### Paso 1: Habilitando del módulo de animaciones From 3cd462c3848ab2f9f4a74f889e2821cf775a3a31 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:45:26 -0300 Subject: [PATCH 19/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 7a2d0054864a..d30bfe4d64b2 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -31,7 +31,7 @@ Los principales módulos de Angular para animaciones son `@angular/animations` y Para comenzar a agregar animaciones de Angular a su proyecto, importa los módulos específicos de animación junto con la funcionalidad estándar de Angular. -### Paso 1: Habilitando del módulo de animaciones +### Paso 1: Habilitando el módulo de animaciones Importa `BrowserAnimationsmodule`, que introduce las capacidades de animación en el módulo raíz de tu aplicación Angular. From 8d0897c95b7a030e4c06a10322220662b20b2d2d Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:45:36 -0300 Subject: [PATCH 20/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index d30bfe4d64b2..75201f36275a 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -45,7 +45,7 @@ Importa `BrowserAnimationsmodule`, que introduce las capacidades de animación e ### Paso 2: Importando funciones de animación en componentes -Si planea usar funciones específicas de animación en componentes, importe esas funciones desde `@angular/animations`. +Si planeas usar funciones específicas de animación en componentes, importa esas funciones desde `@angular/animations`. From f3dc23a019ffb1a206f11ac6267dfe36a02fd9be Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:45:48 -0300 Subject: [PATCH 21/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 75201f36275a..4a4f018e15d2 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -66,7 +66,7 @@ Pon este disparador que define una animación dentro de la propiedad de metadato ## Animando una transición simple -Vamos a animar una transición simple que cambia un solo elemento HTML de un estado a otro. Por ejemplo, puede especificar que un botón muestre **Open** o **Closed** basado en la última acción del usuario. Cuando el botón está en el estado "Open", es visible y amarillo. Cuando es el estado "Closed", es transparente y verde. +Vamos a animar una transición simple que cambia un solo elemento HTML de un estado a otro. Por ejemplo, puedes especificar que un botón muestre **Open** o **Closed** basado en la última acción del usuario. Cuando el botón está en el estado "Open", es visible y amarillo. Cuando es el estado "Closed", es transparente y verde. En HTML, estos atributos se establecen habitualmente mediante estilos CSS, como el color y la opacidad. En Angular, use la función `style()` para especificar un conjunto de estilos CSS para usar con animaciones. Puede recopilar un conjunto de estilos en un estado de animación y darle un nombre al estado, como "open" o "closed". From 1ec9def250f661c6f6c01f979e59c390e212ea44 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:47:01 -0300 Subject: [PATCH 22/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit cambio de 'usted' por 'tu' Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 4a4f018e15d2..9804a2816f54 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -68,7 +68,7 @@ Pon este disparador que define una animación dentro de la propiedad de metadato Vamos a animar una transición simple que cambia un solo elemento HTML de un estado a otro. Por ejemplo, puedes especificar que un botón muestre **Open** o **Closed** basado en la última acción del usuario. Cuando el botón está en el estado "Open", es visible y amarillo. Cuando es el estado "Closed", es transparente y verde. -En HTML, estos atributos se establecen habitualmente mediante estilos CSS, como el color y la opacidad. En Angular, use la función `style()` para especificar un conjunto de estilos CSS para usar con animaciones. Puede recopilar un conjunto de estilos en un estado de animación y darle un nombre al estado, como "open" o "closed". +En HTML, estos atributos se establecen habitualmente mediante estilos CSS, como el color y la opacidad. En Angular, usa la función `style()` para especificar un conjunto de estilos CSS para usar con animaciones. Puedes recopilar un conjunto de estilos en un estado de animación y darle un nombre al estado, como "open" o "closed".
open and closed states From 4a2009baac6fbbf96def508d9f99163491993a5e Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:47:18 -0300 Subject: [PATCH 23/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit cambio de 'usted' por 'tu' Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 9804a2816f54..eeae0965d6eb 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -76,7 +76,7 @@ En HTML, estos atributos se establecen habitualmente mediante estilos CSS, como ### Animación, estados y estilos -Use la función `state()` de Angular para definir diferentes estados para llamar al final de cada transición. Esta función toma dos argumentos: un nombre único como `open` o `closed` y una función `style()`. +Usa la función `state()` de Angular para definir diferentes estados para llamar al final de cada transición. Esta función toma dos argumentos: un nombre único como `open` o `closed` y una función `style()`. Utilice la función `style()` para definir un conjunto de estilos para asociarlos con un nombre de estado dado. Tenga en cuenta que los atributos de estilo deben estar en[*camelCase*](guide/glossary#case-conventions). From 1ffb4859e12ee8e7d7724502afb40f521ca649b4 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:47:31 -0300 Subject: [PATCH 24/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit cambio de 'usted' por 'tu' Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index eeae0965d6eb..328aa9d2a045 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -78,7 +78,7 @@ En HTML, estos atributos se establecen habitualmente mediante estilos CSS, como Usa la función `state()` de Angular para definir diferentes estados para llamar al final de cada transición. Esta función toma dos argumentos: un nombre único como `open` o `closed` y una función `style()`. -Utilice la función `style()` para definir un conjunto de estilos para asociarlos con un nombre de estado dado. Tenga en cuenta que los atributos de estilo deben estar en[*camelCase*](guide/glossary#case-conventions). +Utiliza la función `style()` para definir un conjunto de estilos para asociarlos con un nombre de estado dado. Ten en cuenta que los atributos de estilo deben estar en [*camelCase*](guide/glossary#case-conventions). Vamos a ver como funciona la función `state()` de Angular trabajando con la función `style()` para establecer atributos de estilo CSS. En este fragmento de código, se establecen varios atributos de estilo al mismo tiempo para el estado. En el estado `open`, el botón tiene una altura de 200 píxeles, una opacidad de 1 y un color de fondo amarillo. From 875dceb818a15a6d804eff64d0ce0c412b3688fd Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:47:44 -0300 Subject: [PATCH 25/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit cambio de 'usted' por 'tu' Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 328aa9d2a045..e7ea1edd8e66 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -93,7 +93,7 @@ En el estado `closed`, que se muestra a continuación, el botón tiene una altur ### Transiciones y sincronización -En Angular, puede establecer varios estilos sin ninguna animación. Sin embargo, sin más refinamiento, el botón se transforma instantáneamente sin desvanecimiento, sin encogimiento u otro indicador visible de que se está produciendo un cambio. +En Angular, puedes establecer varios estilos sin ninguna animación. Sin embargo, sin más refinamiento, el botón se transforma instantáneamente sin desvanecimiento, sin encogimiento u otro indicador visible de que se está produciendo un cambio. Para que el cambio sea menos abrupto, necesitamos definir una animación *transition* para especificar los cambios que ocurren entre un estado y otro durante un período de tiempo. La función `transition()` acepta dos argumentos: el primer argumento acepta una expresión que define la dirección entre dos estados de transición, y el segundo argumento acepta uno o una serie de pasos de `animate()`. From 694909c2671abcfe7974732e002d2d8297a17a13 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:47:56 -0300 Subject: [PATCH 26/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit cambio de 'usted' por 'tu' Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index e7ea1edd8e66..71c2be4c14dd 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -99,7 +99,7 @@ Para que el cambio sea menos abrupto, necesitamos definir una animación *transi y el segundo argumento acepta uno o una serie de pasos de `animate()`. -Use la función `animate()` para definir la duración, el retraso y la suavización de una transición, y para designar la función de estilo para definir estilos mientras se realizan las transiciones. También puede utilizar la función `animate()` para definir la función `keyframes()` para animaciones de varios pasos. Estas definiciones se colocan en el segundo argumento de la función `animate()`. +Usa la función `animate()` para definir la duración, el retraso y la suavización de una transición, y para designar la función de estilo para definir estilos mientras se realizan las transiciones. También puedes utilizar la función `animate()` para definir la función `keyframes()` para animaciones de varios pasos. Estas definiciones se colocan en el segundo argumento de la función `animate()`. #### Metadatos de animación: duración, retraso y suavizado From 53b70ac5660c6c90c7ed70e02d6ebf68dd6310c4 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:48:12 -0300 Subject: [PATCH 27/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit cambio de 'usted' por 'tu' Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 71c2be4c14dd..60436935e242 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -104,7 +104,7 @@ Usa la función `animate()` para definir la duración, el retraso y la suavizaci #### Metadatos de animación: duración, retraso y suavizado -La función `animate()` (Segundo argumento de la función transition) acepta los parámetros de entrada `timings` y `styles`. +La función `animate()` (segundo argumento de la función de transición) acepta los parámetros de entrada `timings` y `styles`. El parametro `timings` toma un string definido en tres partes. From f57dea36678d7a0600ee61b41a57f08950dd231d Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:48:46 -0300 Subject: [PATCH 28/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit string por cadena de texto Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 60436935e242..d2091c100b9e 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -106,7 +106,7 @@ Usa la función `animate()` para definir la duración, el retraso y la suavizaci La función `animate()` (segundo argumento de la función de transición) acepta los parámetros de entrada `timings` y `styles`. -El parametro `timings` toma un string definido en tres partes. +El parámetro `timings` toma una cadena de texto definida en tres partes. >`animate('duration delay easing')` From 503e3e1b96f0c7788b4468b90366b65a9ccf1634 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:49:02 -0300 Subject: [PATCH 29/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit cambio de 'usted' por 'tu' Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index d2091c100b9e..a73fa7b39d23 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -124,7 +124,7 @@ El segundo argumento, `delay`, tiene la misma sintaxis que `duration`. Por ejemp El tercer argumento, `easing`, controla cómo la animación [acelera y desacelera](http://easings.net/) durante su tiempo de ejecución. Por ejemplo, `ease-in` hace que la animación comience lentamente y aumente la velocidad a medida que avanza. -* Esperar por 100ms, correr por 200ms. Use una curva de desaceleración para comenzar rápido y desacelere lentamente hasta un punto de reposo: `'0.2s 100ms ease-out'` +* Espera por 100ms, corre por 200ms. Usa una curva de desaceleración para comenzar rápido y desacelera lentamente hasta un punto de reposo: `'0.2s 100ms ease-out'` * Corre por 200ms, sin demora. Usa una curva estándar para comenzar lento, acelerar en el medio y luego desacelerar lentamente al final: `'0.2s ease-in-out'` From 9945c7063988d5fb0a9c02282f3570c4c462c4d5 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:49:32 -0300 Subject: [PATCH 30/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit corrección ortográfica requerida Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index a73fa7b39d23..37e933de9027 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -110,7 +110,7 @@ El parámetro `timings` toma una cadena de texto definida en tres partes. >`animate('duration delay easing')` -La primera parte, `duration`, es requerrida. La duración se puede expresar en milisegundos como un simple número sin comillas, o en segundos con comillas y un tiempo específico. Por ejemplo, una duración de una décima de segundo se puede expresar de la siguiente manera: +La primera parte, `duration`, es requerida. La duración se puede expresar en milisegundos como un simple número sin comillas, o en segundos con comillas y un tiempo específico. Por ejemplo, una duración de una décima de segundo se puede expresar de la siguiente manera: * Como un número plano, en milisegundos: `100` From 07eed2fbb23bf8386dc7b68389dfbeef9d543316 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:49:46 -0300 Subject: [PATCH 31/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit cambio de 'usted' por 'tu' Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 37e933de9027..1d2bf8a40e5d 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -120,7 +120,7 @@ La primera parte, `duration`, es requerida. La duración se puede expresar en mi El segundo argumento, `delay`, tiene la misma sintaxis que `duration`. Por ejemplo: -* Espere 100ms y luego ejecute por 200ms: `'0.2s 100ms'` +* Espera 100ms y luego ejecuta por 200ms: `'0.2s 100ms'` El tercer argumento, `easing`, controla cómo la animación [acelera y desacelera](http://easings.net/) durante su tiempo de ejecución. Por ejemplo, `ease-in` hace que la animación comience lentamente y aumente la velocidad a medida que avanza. From bba9f0d3d9505a75947f8de27780abb9feb51936 Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:50:06 -0300 Subject: [PATCH 32/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit string por cadena de texto Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 1d2bf8a40e5d..fb2f1720175b 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -114,7 +114,7 @@ La primera parte, `duration`, es requerida. La duración se puede expresar en mi * Como un número plano, en milisegundos: `100` -* En un string, como milisegundos: `'100ms'` +* En una cadena de texto, como milisegundos: `'100ms'` * En un string, como segundos: `'0.1s'` From 336466eb5ecc4af2c23612ff053513a7ea3f8afc Mon Sep 17 00:00:00 2001 From: Danilo Prieto Date: Thu, 22 Apr 2021 15:50:26 -0300 Subject: [PATCH 33/39] Update aio/content/guide/animations.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit String por cadena de texto Co-authored-by: Daniel Díaz <36966980+dalejodc@users.noreply.github.com> --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index fb2f1720175b..c726143650bd 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -116,7 +116,7 @@ La primera parte, `duration`, es requerida. La duración se puede expresar en mi * En una cadena de texto, como milisegundos: `'100ms'` -* En un string, como segundos: `'0.1s'` +* En una cadena de texto, como segundos: `'0.1s'` El segundo argumento, `delay`, tiene la misma sintaxis que `duration`. Por ejemplo: From 99ab599df323ed3a6664d7d2814f227b53d1748e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20D=C3=ADaz?= <36966980+dalejodc@users.noreply.github.com> Date: Tue, 27 Apr 2021 20:56:28 -0600 Subject: [PATCH 34/39] docs: Update aio/content/guide/animations.md Co-authored-by: Michael Prentice --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index c726143650bd..ef1f960cd30b 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -86,7 +86,7 @@ En el estado `open`, el botón tiene una altura de 200 píxeles, una opacidad de -En el estado `closed`, que se muestra a continuación, el botón tiene una altura de 100 píxeles, una opacidad de 0,5 y un color de fondo verde. +En el estado `closed`, que se muestra a continuación, el botón tiene una altura de 100 píxeles, una opacidad de 0.5 y un color de fondo verde. From 3bad8ee5d662325ea19809b53bd343717ac50f54 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20D=C3=ADaz?= <36966980+dalejodc@users.noreply.github.com> Date: Tue, 27 Apr 2021 20:57:07 -0600 Subject: [PATCH 35/39] docs: Update aio/content/guide/animations.md Co-authored-by: Michael Prentice --- aio/content/guide/animations.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index ef1f960cd30b..ac9bcb20ef10 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -11,8 +11,7 @@ Las animaciones bien diseñadas pueden hacer que tu aplicación sea más diverti Normalmente, las animaciones implican múltiples *transformaciones* de estilo a lo largo del tiempo. Un elemento HTML puede moverse, cambiar de color, crecer o encogerse, desvanecerse o deslizarse fuera de la página. Estos cambios pueden ocurrir de forma simultánea o secuencial. Puedes controlar el momento de cada transformación. -El sistema de animación de Angular se basa en las funcionalidades de CSS, lo que significa que puedes animar cualquier propiedad que el navegador considere animable. Esto incluye posiciones, tamaños, transformaciones, colores, bordes, etc. El W3C mantiene una lista de propiedades animables en tu página -[Transiciones CSS](https://www.w3.org/TR/css-transitions-1/). +El sistema de animación de Angular se basa en las funcionalidades de CSS, lo que significa que puedes animar cualquier propiedad que el navegador considere animable. Esto incluye posiciones, tamaños, transformaciones, colores, bordes, etc. El W3C mantiene una lista de propiedades animables en tu página [Transiciones CSS](https://www.w3.org/TR/css-transitions-1/). ## Acerca de esta guía Esta guía cubre las funcionalidades básicas de animación en Angular para comenzar a agregar animaciones de Angular a tu proyecto. From 86daf6a37608ddbd2b7ed0df32336221b1acb08d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20D=C3=ADaz?= <36966980+dalejodc@users.noreply.github.com> Date: Tue, 27 Apr 2021 20:57:31 -0600 Subject: [PATCH 36/39] docs: Update aio/content/guide/animations.md --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index ac9bcb20ef10..c807d44fb8d3 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -159,7 +159,7 @@ region="transition2"> * Cuando las animaciones están deshabilitadas, los estilos `transition()` se pueden omitir, pero los estilos `state()` no. -* Puede incluir varios pares de estados dentro del mismo argumento `transition()`:
`transition( 'on => off, off => void' )`. +* Puedes incluir varios pares de estados dentro del mismo argumento `transition()`:
`transition( 'on => off, off => void' )`.
### Activando la animación From 24cd50e9209dee64c7a27101129f2c3caf484f43 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20D=C3=ADaz?= <36966980+dalejodc@users.noreply.github.com> Date: Tue, 27 Apr 2021 20:57:53 -0600 Subject: [PATCH 37/39] docs: Update aio/content/guide/animations.md --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index c807d44fb8d3..e244ae241fbe 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -181,7 +181,7 @@ En este ejemplo, nombraremos el disparador `openClose` y lo adjuntaremos al elem ### Definir animaciones y adjuntarlas a la plantilla HTML -Las animaciones se definen en los metadatos del componente que controla el elemento HTML a animar. Ponga el código que define sus animaciones debajo de la propiedad `animations:` dentro del decorador `@Component()`. +Las animaciones se definen en los metadatos del componente que controla el elemento HTML a animar. Pon el código que define tus animaciones debajo de la propiedad `animations:` dentro del decorador `@Component()`. From 6379385cd8ce076a4531eff21e5b458a0d8c7305 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20D=C3=ADaz?= <36966980+dalejodc@users.noreply.github.com> Date: Tue, 27 Apr 2021 20:58:12 -0600 Subject: [PATCH 38/39] docs: Update aio/content/guide/animations.md --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index e244ae241fbe..4ef4131d3baf 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -185,7 +185,7 @@ Las animaciones se definen en los metadatos del componente que controla el eleme -Cuando haya definido un disparador de animación para un componente, puede adjuntarlo a un elemento en la plantilla de ese componente colocando el nombre del disparador entre paréntesis y precediéndolo con un símbolo `@`. Luego, puede vincular el disparador a una expresión de plantilla utilizando la sintaxis de enlace estandar en Angular como se muestra a continuación, Donde `triggerName` es el nombre del disparador, y `expression` evalúa un estado definido de la animación. +Cuando hayas definido un disparador de animación para un componente, puedes adjuntarlo a un elemento en la plantilla de ese componente colocando el nombre del disparador entre paréntesis y precediéndolo con un símbolo `@`. Luego, puedes vincular el disparador a una expresión de plantilla utilizando la sintaxis de enlace estándar en Angular como se muestra a continuación, donde `triggerName` es el nombre del disparador, y `expression` evalúa un estado definido de la animación. ```
...
; From 7defdf04a75da6c40dcd535f8e5b137c65b18779 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20D=C3=ADaz?= <36966980+dalejodc@users.noreply.github.com> Date: Tue, 27 Apr 2021 20:58:25 -0600 Subject: [PATCH 39/39] docs: Update aio/content/guide/animations.md --- aio/content/guide/animations.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aio/content/guide/animations.md b/aio/content/guide/animations.md index 4ef4131d3baf..fd79f0490905 100644 --- a/aio/content/guide/animations.md +++ b/aio/content/guide/animations.md @@ -201,7 +201,7 @@ region="compare"> En este ejemplo, cuando la expresión `isOpen` evalúa el estado definido de `open` o `closed`, esto notifica al disparador `openClose` de un cambio de estado. Entonces depende del código `openClose` manejar el cambio de estado e iniciar una animación de cambio de estado. -Para los elementos que entran o salen de una página (insertados o eliminados del DOM), puede hacer que las animaciones sean condicionales. Por ejemplo, use `*ngIf` con el disparador de animación en la plantilla HTML. +Para los elementos que entran o salen de una página (insertados o eliminados del DOM), puedes hacer que las animaciones sean condicionales. Por ejemplo, usa `*ngIf` con el disparador de animación en la plantilla HTML.