Angular анимация создание с помощью CSS и API, стили и состояния


Содержание материала:

Stepan Suvorov Blog

Release 2.0

Анимация stateChange AngularJS

Вдохновленный примером анимации от яйцеголового решил реализовать такой же подход у себя на проекте, а именно: при навигации по разным вью делать не “дерганую” резкую подгрузку, а плавную. Пишем простую анимацию на css-transitions и пользуемся angular-animate.

Для начала убедимся что angular-animate модуль подключен к проекту:

  1. подключен сам файл angular-animate.js
  2. мы заинжектили ngAnimate модуль в наш проект

Теперь можем написать нашу анимацию:

И все, наслаждаемся анимацией при переходе. Это работает с ui-router, с ngRoute вероятно тоже будет работать, если подправить селекторы.

Вот тут можно посмотреть живой пример. При выборе категории будет анимирована подгрузка контента.

Angular CSS и Style

# ngStyle динамические стили

Сформируем в конструкторе компонента варианты значений, в зависимости от которых назначим стиль backgroundColor у элемента.

constructor() — метод конструктор в TypeScript

Название директивы — ngStyle , квадратные скобки ипользуются для связывания.

таким образом, директива ngStyle связывается с функцией, которая возвращает цвет для backgroundColor

Вместо можно написать <'background-color': getColor()>. Это js object. Ключ — название свойства. Вариант с КэмелКейс ангуляровский синтаксис, но в кавычках можно вписать и традиционный css вариант написания.

Angular 5 Material для начинающих

Данный материал посвящен изучению Angular 5 Material. В примере будет использоваться именно пятая версия, потому что с новыми релизами появляются все новые и новые возможности в фреймворке. Так, например, переход с AngularJS на Angular 2 ознаменовался полной переработкой всего фреймворка.

Начало работы с Angular 5 Material

Для начала необходимо установить Angular CLI глобально во всей системе. Для этого нужно выполнить следующую команду:

Также вы можете ознакомиться с полной документацией по установке на сайте разработчиков.

Создание проекта

В командной строке выполните следующую команду:

С её помощью мы создадим новый проект. Все нужные компоненты приложения будут сгенерированы автоматически.

Установка Angular Material и Angular CDK

В командной строке введите команду для установки компонентов и их зависимостей:

Установка модуля Animations

Для работы с Angular Material нужно установить модуль Animations:

Теперь надо импортировать модули в файле app.module.ts :

Затем нужно добавить новый модуль, который будет отвечать за Angular Material Components. Для этого создется файл в src/app с именем ngmaterial.module.ts :

Теперь модуль MatButtonModule добавлен в приложение. Далее надо
зарегистрировать MaterialAppModule в app.module.ts :

Подключение тем оформления

Для корректной работы тем оформления требуется подключение всех стилей темы глобально в приложении.

Для примера будем использовать заранее подготовленную тему Angular Material Indigo-Pink. Подключим ее в приложение, добавив следующую строку в style.css :

Также подключим поддержку иконок в стиле material. Для этого добавим следующую строку в index.html :

Поддержка жестов

Некоторые элементы ( mat-slide-toggle , mat-slider , matTooltip ) используют HammerJS для обработки жестов. Для полной поддержки возможностей этих элементов надо подключить HammerJS в приложение.

Это можно сделать несколькими способами: через npm, с использованием CDN (например Google CDN) или же напрямую из приложения.

Практическое лабораторное занятие. Создание одностраничного приложения (SPA) с помощью веб-API ASP.NET и Angular.js Hands On Lab: Build a Single Page Application (SPA) with ASP.NET Web API and Angular.js

Данная лабораторная работа показано, как создать одностраничное приложение (SPA) с веб-API ASP.NET и Angular.js для ASP.NET 4.x. This hands on lab shows you how to build a Single Page Application (SPA) with ASP.NET Web API and Angular.js for ASP.NET 4.x.

В этой лаборатории в наличии будет воспользоваться преимуществами этих технологий для реализации Quiz компьютерщик, trivia веб-сайт, на концепции SPA. In this hand-on lab, you will take advantage of those technologies to implement Geek Quiz, a trivia website based on the SPA concept. Сначала будет реализовать на уровне службы с веб-API ASP.NET, чтобы предоставить необходимые конечные точки, чтобы получить на вопросы викторины и сохранить ответы. You will first implement the service layer with ASP.NET Web API to expose the required endpoints to retrieve the quiz questions and store the answers. Затем вы создадите пользовательский Интерфейс, широкие возможности и отвечает на запросы, с помощью AngularJS и CSS3 влияние преобразования. Then, you will build a rich and responsive UI using AngularJS and CSS3 transformation effects.

В традиционных веб-приложениях клиент (браузер) инициирует обмен данными с сервером путем запроса страницы. In traditional web applications, the client (browser) initiates the communication with the server by requesting a page. Затем сервер обрабатывает запрос и отправляет клиенту HTML-код страницы. The server then processes the request and sends the HTML of the page to the client. В последующих взаимодействий со страницей — например пользователь переходит по ссылке или отправке формы с данными — новый запрос отправляется на сервер, и начнет работу потока: сервер обрабатывает запрос и возвращает новую страницу в браузер в ответ на запрос нового действия Эд клиентом. In subsequent interactions with the page –e.g. the user navigates to a link or submits a form with data– a new request is sent to the server, and the flow starts again: the server processes the request and sends a new page to the browser in response to the new action requested by the client.

В одностраничных приложениях (SPA) вся страница загружается в браузере после начального запроса, но последующие операции выполняются с помощью запросов Ajax. In Single-Page Applications (SPAs) the entire page is loaded in the browser after the initial request, but subsequent interactions take place through Ajax requests. Это означает, что браузер должен обновить только часть страницы, которая была изменена; Нет необходимости перезагрузить всей страницы. This means that the browser has to update only the portion of the page that has changed; there is no need to reload the entire page. SPA подход уменьшает время, необходимое для реагирования на действия пользователя, что более гибкий интерфейса приложения. The SPA approach reduces the time taken by the application to respond to user actions, resulting in a more fluid experience.

Архитектура SPA включает в себя определенные трудности, которые не существуют в традиционные веб-приложения. The architecture of a SPA involves certain challenges that are not present in traditional web applications. Тем не менее новые технологии, такие как веб-API ASP.NET, JavaScript платформы, такие как AngularJS, и новые функции стилей, предоставляемые CSS3 сделать очень легко проектировать и создавать одностраничные приложения. However, emerging technologies like ASP.NET Web API, JavaScript frameworks like AngularJS and new styling features provided by CSS3 make it really easy to design and build SPAs.

Все примеры кода и фрагменты кода включены в Web лагеря комплект обучающих материалов, доступных в https://aka.ms/webcamps-training-kit . All sample code and snippets are included in the Web Camps Training Kit, available at https://aka.ms/webcamps-training-kit.

Обзор Overview

Цели Objectives

В этой практической работу вы узнаете, как: In this hands-on lab, you will learn how to:

  • Создание службы веб-API ASP.NET для отправки и получения данных JSON Create an ASP.NET Web API service to send and receive JSON data
  • Создание адаптивного пользовательского интерфейса с помощью AngularJS Create a responsive UI using AngularJS
  • Улучшения пользовательского интерфейса с помощью преобразований CSS3 Enhance the UI experience with CSS3 transformations

Предварительные требования Prerequisites

Для завершения этой практической работу требуется следующее: The following is required to complete this hands-on lab:

Установка Setup

Для выполнения упражнений в этой практической работу, необходимо сначала настроить среду. In order to run the exercises in this hands-on lab, you will need to set up your environment first.

  1. Откройте Windows Explorer и перейдите к лаборатории источника папки. Open Windows Explorer and browse to the lab’s Source folder.
  2. Щелкните правой кнопкой мыши Setup.cmd и выберите Запуск от имени администратора для запуска процесса установки, будет настроить среду и установить фрагменты кода Visual Studio для этой лабораторной работы. Right-click on Setup.cmd and select Run as administrator to launch the setup process that will configure your environment and install the Visual Studio code snippets for this lab.
  3. Если отображается диалоговое окно контроля учетных записей, подтвердите действие для продолжения. If the User Account Control dialog box is shown, confirm the action to proceed.

Убедитесь, что все зависимости для этой лабораторной работы вы вернули перед запуском программы установки. Make sure you have checked all the dependencies for this lab before running the setup.

Фрагменты кода Using the Code Snippets

В этом документе лаборатории вам будет рекомендовано вставлять блоки кода. Throughout the lab document, you will be instructed to insert code blocks. Для удобства основная часть кода предоставляется как фрагменты кода Visual Studio, к которому можно получить из в Visual Studio 2013, чтобы избежать необходимости добавлять ее вручную. For your convenience, most of this code is provided as Visual Studio Code Snippets, which you can access from within Visual Studio 2013 to avoid having to add it manually.

Каждого упражнения сопровождается начальный решения, расположенный в начать папку упражнения, чему вы сможете каждого упражнения, независимо от других. Each exercise is accompanied by a starting solution located in the Begin folder of the exercise that allows you to follow each exercise independently of the others. Имейте в виду, что фрагменты кода, которые добавляются во время атаки, отсутствуют эти стартовые решения и могут не работать, пока не будут выполнены упражнения. Please be aware that the code snippets that are added during an exercise are missing from these starting solutions and may not work until you have completed the exercise. В исходном коде для упражнения, вы также найдете окончания папку, содержащую решение Visual Studio с кодом, полученный в результате выполнения действий, описанных в соответствующий упражнении. Inside the source code for an exercise, you will also find an End folder containing a Visual Studio solution with the code that results from completing the steps in the corresponding exercise. Эти решения можно использовать в качестве руководства, если вам нужна дополнительная помощь, отвечая на это Практическое занятие. You can use these solutions as guidance if you need additional help as you work through this hands-on lab.

Упражнения Exercises

Это Практическое занятие включает в себя следующие упражнения: This hands-on lab includes the following exercises:

Предполагаемое время для выполнения этого лабораторного: 60 минут Estimated time to complete this lab: 60 minutes

При первом запуске Visual Studio, необходимо выбрать один из предварительно определенных коллекций параметров. When you first start Visual Studio, you must select one of the predefined settings collections. Каждой коллекции предопределенных соответствует конкретному стилю разработки и определяет макетов окон, поведение редактора, фрагменты кода IntelliSense и параметры диалогового окна. Each predefined collection is designed to match a particular development style and determines window layouts, editor behavior, IntelliSense code snippets, and dialog box options. В этом лабораторном занятии описаны действия, необходимые для выполнения данной задачи в Visual Studio при использовании обычные параметры разработки коллекции. The procedures in this lab describe the actions necessary to accomplish a given task in Visual Studio when using the General Development Settings collection. При выборе другого набора параметров для среды разработки, возможно, различия в действиях, которые следует учитывать. If you choose a different settings collection for your development environment, there may be differences in the steps that you should take into account.

Упражнение 1. Создание веб-API Exercise 1: Creating a Web API

Одним из ключевых элементов SPA является уровень служб. One of the key parts of a SPA is the service layer. Он отвечает за обработку вызовов Ajax, отправляемые функциями пользовательского интерфейса и возврат данных в ответ на этот вызов. It is responsible for processing the Ajax calls sent by the UI and returning data in response to that call. Извлеченные данные должны быть представлены в машиночитаемом формате для синтаксического анализа и использования клиентом. The data retrieved should be presented in a machine-readable format in order to be parsed and consumed by the client.

Платформа веб-API является частью стека ASP.NET и предназначен для упрощения реализации службы HTTP, как правило, отправки и получения данных в формате JSON или XML через API-интерфейсов RESTful. The Web API framework is part of the ASP.NET Stack and is designed to make it easy to implement HTTP services, generally sending and receiving JSON- or XML-formatted data through a RESTful API. В этом упражнении вы создадите веб-сайт для размещения приложения Quiz компьютерщик, а затем реализуйте серверной службы для предоставления и сохранения данных тест, с помощью веб-API ASP.NET. In this exercise you will create the Web site to host the Geek Quiz application and then implement the back-end service to expose and persist the quiz data using ASP.NET Web API.

Задача 1 – Создание начального проекта для Компьютерщик головоломки Task 1 – Creating the Initial Project for Geek Quiz

В этой задаче будет приступить к созданию нового проекта ASP.NET MVC с поддержкой веб-API ASP.NET на основе One ASP.NET тип, который поставляется с Visual Studio проекта. In this task you will start creating a new ASP.NET MVC project with support for ASP.NET Web API based on the One ASP.NET project type that comes with Visual Studio. One ASP.NET объединяет все технологии ASP.NET и предоставляет вам возможность комбинировать и сопоставлять их при необходимости. One ASP.NET unifies all ASP.NET technologies and gives you the option to mix and match them as desired. Затем вы добавите классы модели Entity Framework и инициализации базы данных для вставки вопросы теста. You will then add the Entity Framework’s model classes and the database initializer to insert the quiz questions.

Откройте Visual Studio Express 2013 для Web и выберите файл | Создать проект. для запуска нового решения. Open Visual Studio Express 2013 for Web and select File | New Project. to start a new solution.

Создание нового проекта Creating a New Project

В новый проект выберите веб-приложение ASP.NET под Visual C# | Web вкладки. Убедитесь, что .NET Framework 4.5 — флажок установлен, назовите его GeekQuiz, выберите расположение и нажмите кнопку ОК. In the New Project dialog box, select ASP.NET Web Application under the Visual C# | Web tab. Make sure .NET Framework 4.5 is selected, name it GeekQuiz, choose a Location and click OK.

Создание нового проекта веб-приложения ASP.NET Creating a new ASP.NET Web Application project

В новый проект ASP.NET выберите MVC шаблона и выберите веб-API параметр. In the New ASP.NET Project dialog box, select the MVC template and select the Web API option. Кроме того, убедитесь, что проверки подлинности параметру присваивается учетные записи отдельных пользователей. Also, make sure that the Authentication option is set to Individual User Accounts. Нажмите кнопку ОК , чтобы продолжить. Click OK to continue.

Создание нового проекта с помощью шаблона MVC, включая компоненты веб-API Creating a new project with the MVC template, including Web API components

В обозревателе решений, щелкните правой кнопкой мыши моделей папке GeekQuiz проекта и выберите Add | Существующий элемент. . In Solution Explorer, right-click the Models folder of the GeekQuiz project and select Add | Existing Item. .

Добавление существующего элемента Adding an existing item

В добавить существующий элемент диалогового окна поле, перейдите в каталог источника/ресурсы/моделей папку и выберите все файлы. In the Add Existing Item dialog box, navigate to the Source/Assets/Models folder and select all the files. Нажмите кнопку Добавить. Click Add.

Добавление средств модели Adding the model assets

Добавив эти файлы, при добавлении в модель данных, контекст базы данных Entity Framework и инициализации базы данных для приложения Quiz Компьютерщик. By adding these files, you are adding the data model, the Entity Framework’s database context and the database initializer for the Geek Quiz application.

Entity Framework (EF) является объектно реляционного сопоставления (ORM), которая позволяет создавать приложения для доступа к данным, работающие с концептуальной моделью приложения вместо программирования, напрямую с помощью реляционной схемой хранения. Entity Framework (EF) is an object-relational mapper (ORM) that enables you to create data access applications by programming with a conceptual application model instead of programming directly using a relational storage schema. Дополнительные сведения о платформе Entity Framework здесь. You can learn more about Entity Framework here.

Ниже приведено описание классов, которые вы только что добавили. The following is a description of the classes you just added:

  • TriviaOption: представляет отдельный параметр, связанный с вопрос головоломки TriviaOption: represents a single option associated with a quiz question
  • TriviaQuestion: представляет вопрос головоломки и предоставляет связанные параметры через параметры свойство TriviaQuestion: represents a quiz question and exposes the associated options through the Options property
  • TriviaAnswer: представляет параметр, выбранный пользователем в ответ на вопрос головоломки TriviaAnswer: represents the option selected by the user in response to a quiz question
  • TriviaContext: представляет контекст базы данных Entity Framework приложения Компьютерщик тест. TriviaContext: represents the Entity Framework’s database context of the Geek Quiz application. Этот класс является производным от DContext и предоставляет DbSet свойства, представляющие коллекцию сущностей, описанных выше. This class derives from DContext and exposes DbSet properties that represent collections of the entities described above.
  • TriviaDatabaseInitializer: инициализатора Entity Framework для реализации TriviaContext класс, который наследуется от CreateDatabaseIfNotExists. TriviaDatabaseInitializer: the implementation of the Entity Framework initializer for the TriviaContext class which inherits from CreateDatabaseIfNotExists. Этот класс по умолчанию для создания базы данных только в том случае, если он не существует, вставка сущности указан в начальное значение метод. The default behavior of this class is to create the database only if it does not exist, inserting the entities specified in the Seed method.

Откройте Global.asax.cs файл и добавьте следующий оператор using. Open the Global.asax.cs file and add the following using statement.

Добавьте следующий код в начале приложения_запустить метод, чтобы задать TriviaDatabaseInitializer как инициализатор базы данных. Add the following code at the beginning of the Application_Start method to set the TriviaDatabaseInitializer as the database initializer.

Изменить Главная контроллера для ограничения доступа для прошедших проверку пользователей. Modify the Home controller to restrict access to authenticated users. Чтобы сделать это, откройте HomeController.cs внутри контроллеров папку и добавьте Authorize атрибут HomeControllerопределение класса. To do this, open the HomeController.cs file inside the Controllers folder and add the Authorize attribute to the HomeController class definition.

Authorize фильтр проверяет, если пользователь прошел проверку подлинности. The Authorize filter checks to see if the user is authenticated. Если пользователь не прошел проверку подлинности, он возвращает код состояния HTTP 401 (неавторизованный) без вызова действия. If the user is not authenticated, it returns HTTP status code 401 (Unauthorized) without invoking the action. Вы можете применить фильтр глобально, на уровне контроллера или на уровне отдельных действий. You can apply the filter globally, at the controller level, or at the level of individual actions.

Теперь будет выполнена настройка макета веб-страниц и фирменную символику. You will now customize the layout of the web pages and the branding. Чтобы сделать это, откройте _Layout.cshtml внутри представления | Общие папки и обновить содержимое элемента, заменив Мое приложение ASP.NET с Компьютерщик тест . To do this, open the _Layout.cshtml file inside the Views | Shared folder and update the content of the element by replacing My ASP.NET Application with Geek Quiz.

В тот же файл, добавить на панель навигации, удалив о и контакт ссылки и переименование Главная связать воспроизведение. In the same file, update the navigation bar by removing the About and Contact links and renaming the Home link to Play. Кроме того, переименование имя_приложения связать Quiz Компьютерщик. Additionally, rename the Application name link to Geek Quiz. HTML для панели навигации должен выглядеть аналогично следующему коду. The HTML for the navigation bar should look like the following code.

Обновите нижний колонтитул страницы макета, заменив Мое приложение ASP.NET с Quiz Компьютерщик. Update the footer of the layout page by replacing My ASP.NET Application with Geek Quiz. Для этого замените содержимое элемент с следующий выделенный код. To do this, replace the content of the element with the following highlighted code.

Задача 2 — Создание TriviaController веб-API Task 2 – Creating the TriviaController Web API

В предыдущей задаче вы создали начальную структуру веб-приложения Quiz Компьютерщик. In the previous task, you created the initial structure of the Geek Quiz web application. Теперь вы создадите простую службу веб-API, который взаимодействует с моделью данных головоломки и предоставляет следующие действия: You will now build a simple Web API service that interacts with the quiz data model and exposes the following actions:

  • GET/api/trivia: Извлекает следующий вопрос из списка викторины, чтобы получать ответ пользователя, прошедшего аутентификацию. GET /api/trivia: Retrieves the next question from the quiz list to be answered by the authenticated user.
  • POST/api/trivia: Сохраняет ответ головоломки, указанное пользователем, прошедшим проверку. POST /api/trivia: Stores the quiz answer specified by the authenticated user.

Формирование шаблонов ASP.NET средств, предоставляемых Visual Studio будет использовать для создания шаблона для класса контроллера веб-API. You will use the ASP.NET Scaffolding tools provided by Visual Studio to create the baseline for the Web API controller class.

Откройте WebApiConfig.cs внутри приложения_запустить папки. Open the WebApiConfig.cs file inside the App_Start folder. Этот файл определяет конфигурацию службы, веб-API, например сопоставление маршрутов к действиям контроллера веб-API. This file defines the configuration of the Web API service, like how routes are mapped to Web API controller actions.

Топ-пост этого месяца:  Node js REST API использование методов http, добавление юзера в базу данных и удаление из нее

Добавьте следующую инструкцию using в начале файла. Add the following using statement at the beginning of the file.

Добавьте следующий выделенный код, который зарегистрировать метод глобально настроить модуль форматирования для данных JSON, извлекаемые методами действий веб-API. Add the following highlighted code to the Register method to globally configure the formatter for the JSON data retrieved by the Web API action methods.

CamelCasePropertyNamesContractResolver автоматически преобразует имена свойств для camel случай, который является соглашением, общие для имен свойств в JavaScript. The CamelCasePropertyNamesContractResolver automatically converts property names to camel case, which is the general convention for property names in JavaScript.

В обозревателе решений, щелкните правой кнопкой мыши контроллеров папке GeekQuiz проекта и выберите Add | Создать шаблонный элемент. . In Solution Explorer, right-click the Controllers folder of the GeekQuiz project and select Add | New Scaffolded Item. .

Создание нового элемента формирования шаблонов Creating a new scaffolded item

В Добавление шаблона диалогового окна поле, убедитесь, что распространенных узел выбран на панели слева. In the Add Scaffold dialog box, make sure that the Common node is selected in the left pane. Выберите контроллер Web API 2 — пустой шаблона в центральной области и нажмите кнопку добавить. Then, select the Web API 2 Controller — Empty template in the center pane and click Add.

Выбрав шаблон пустой контроллер Web API 2 Selecting the Web API 2 Controller Empty template

Формирование шаблонов ASP.NET — это платформа создания кода для веб-приложений ASP.NET. ASP.NET Scaffolding is a code generation framework for ASP.NET Web applications. Visual Studio 2013 включает в себя генераторы предварительно установленных кода для проектов MVC и веб-API. Visual Studio 2013 includes pre-installed code generators for MVC and Web API projects. Для быстрого добавления кода, взаимодействующего с моделями данных, чтобы сократить количество времени, необходимые для разработки стандартных данных операций, следует использовать формирование шаблонов в проекте. You should use scaffolding in your project when you want to quickly add code that interacts with data models in order to reduce the amount of time required to develop standard data operations.

Процесс формирования шаблонов также гарантирует, что в проекте установлены все необходимые зависимости. The scaffolding process also ensures that all the required dependencies are installed in the project. Например если начать с пустого проекта ASP.NET и затем использовать формирование шаблонов по добавлению контроллера в веб-API, необходимые пакеты Web API NuGet и ссылки добавляются в проект автоматически. For example, if you start with an empty ASP.NET project and then use scaffolding to add a Web API controller, the required Web API NuGet packages and references are added to your project automatically.

В Добавление контроллера диалоговом окне TriviaController в имя контроллера текстовое поле и нажмите кнопку добавить. In the Add Controller dialog box, type TriviaController in the Controller name text box and click Add.

Добавление контроллера дополнительной информации Adding the Trivia Controller

TriviaController.cs файл добавляется в контроллеров папке GeekQuiz проект, содержащий пустой TriviaController класса. The TriviaController.cs file is then added to the Controllers folder of the GeekQuiz project, containing an empty TriviaController class. Добавьте следующие операторы using в начале файла. Add the following using statements at the beginning of the file.

(Code Snippet — TriviaControllerUsings AspNetWebApiSpa — сервера Ex1 —) (Code Snippet — AspNetWebApiSpa — Ex1 — TriviaControllerUsings)

Добавьте следующий код в начале TriviaController класс для определения, инициализации и dispose TriviaContext экземпляра в контроллере. Add the following code at the beginning of the TriviaController class to define, initialize and dispose the TriviaContext instance in the controller.

(Code Snippet — TriviaControllerContext AspNetWebApiSpa — сервера Ex1 —) (Code Snippet — AspNetWebApiSpa — Ex1 — TriviaControllerContext)

Dispose метод TriviaController вызывает Dispose метод TriviaContext экземпляр, который гарантирует, что все освобождаются ресурсы, используемые объектом контекста при TriviaContext экземпляр удаляется или сборщиком мусора. The Dispose method of TriviaController invokes the Dispose method of the TriviaContext instance, which ensures that all the resources used by the context object are released when the TriviaContext instance is disposed or garbage-collected. Сюда входят, закрытие всех подключений к базе данных открывается с Entity Framework. This includes closing all database connections opened by Entity Framework.

Добавьте следующий вспомогательный метод в конце TriviaController класса. Add the following helper method at the end of the TriviaController class. Этот метод извлекает следующий вопрос тест из базы данных, которые отвечают указанному пользователю. This method retrieves the following quiz question from the database to be answered by the specified user.

(Code Snippet — TriviaControllerNextQuestion AspNetWebApiSpa — сервера Ex1 —) (Code Snippet — AspNetWebApiSpa — Ex1 — TriviaControllerNextQuestion)

Добавьте следующий получить методом действия TriviaController класса. Add the following Get action method to the TriviaController class. Этот метод вызывает NextQuestionAsync вспомогательный метод, определенный в предыдущем шаге, чтобы получить следующий вопрос для авторизованного пользователя. This action method calls the NextQuestionAsync helper method defined in the previous step to retrieve the next question for the authenticated user.

(Code Snippet — TriviaControllerGetAction AspNetWebApiSpa — сервера Ex1 —) (Code Snippet — AspNetWebApiSpa — Ex1 — TriviaControllerGetAction)

Добавьте следующий вспомогательный метод в конце TriviaController класса. Add the following helper method at the end of the TriviaController class. Этот метод сохраняет указанный ответ в базе данных и возвращает логическое значение, указывающее, будет ли получен верный ответ. This method stores the specified answer in the database and returns a Boolean value indicating whether or not the answer is correct.

(Code Snippet — TriviaControllerStoreAsync AspNetWebApiSpa — сервера Ex1 —) (Code Snippet — AspNetWebApiSpa — Ex1 — TriviaControllerStoreAsync)

Добавьте следующий Post методом действия TriviaController класса. Add the following Post action method to the TriviaController class. Этот метод действия связывает ответ на прошедшего проверку подлинности пользователя и вызывает StoreAsync вспомогательный метод. This action method associates the answer to the authenticated user and calls the StoreAsync helper method. Затем оно отправляет ответ с логическое значение, возвращенное вспомогательный метод. Then, it sends a response with the Boolean value returned by the helper method.

(Code Snippet — TriviaControllerPostAction AspNetWebApiSpa — сервера Ex1 —) (Code Snippet — AspNetWebApiSpa — Ex1 — TriviaControllerPostAction)

Изменение контроллера веб-API для ограничения доступа пользователям, прошедшим проверку, добавив Authorize атрибут TriviaController определение класса. Modify the Web API controller to restrict access to authenticated users by adding the Authorize attribute to the TriviaController class definition.


Задача 3 – при запуске решения Task 3 – Running the Solution

В этой задаче вы проверите, что служба веб-API, созданный в предыдущей задаче работает должным образом. In this task you will verify that the Web API service you built in the previous task is working as expected. В Internet Explorer будет использоваться средства разработчика F12 для записи сетевого трафика и проверки полный ответ от службы веб-API. You will use the Internet Explorer F12 Developer Tools to capture the network traffic and inspect the full response from the Web API service.

Убедитесь, что Internet Explorer выбран в запустить расположенную на панели инструментов Visual Studio. Make sure that Internet Explorer is selected in the Start button located on the Visual Studio toolbar.

Нажмите клавишу F5 для запуска решения. Press F5 to run the solution. Вход страница должна выглядеть в браузере. The Log in page should appear in the browser.

Активируется при запуске приложения, маршрут по умолчанию MVC, которое по умолчанию сопоставляется индекс действие HomeController класса. When the application starts, the default MVC route is triggered, which by default is mapped to the Index action of the HomeController class. Так как HomeController только пользователям, прошедшим проверку (Помните, что вы атрибутом класса Authorize атрибут в упражнении 1) и пользователь не прошел проверку подлинности, но приложение перенаправляет на страницу входа исходного запроса. Since HomeController is restricted to authenticated users (remember that you decorated that class with the Authorize attribute in Exercise 1) and there is no user authenticated yet, the application redirects the original request to the log in page.

При запуске решения Running the solution

Нажмите кнопку зарегистрировать для создания нового пользователя. Click Register to create a new user.

Регистрация нового пользователя Registering a new user

В зарегистрировать введите имя пользователя и пароль, а затем нажмите кнопку зарегистрировать. In the Register page, enter a User name and Password, and then click Register.

Страница «Регистрация» Register page

Приложение регистрирует новую учетную запись, и пользователь прошел проверку подлинности и перенаправляется на домашнюю страницу. The application registers the new account and the user is authenticated and redirected back to the home page.

Пользователь прошел проверку подлинности User is authenticated

В браузере, нажмите клавишу F12 открыть средств разработчика панели. In the browser, press F12 to open the Developer Tools panel. Нажмите клавишу CTRL + 4 или нажмите кнопку сети значок, а затем щелкните кнопку с зеленой стрелкой, чтобы начать отслеживать сетевой трафик. Press CTRL + 4 or click the Network icon, and then click the green arrow button to begin capturing network traffic.

Запуск записи сетевых данных веб-API Initiating Web API network capture

Добавление api/trivia на URL-адрес в адресной строке браузера. Append api/trivia to the URL in the browser’s address bar. Теперь проверьте сведения об ответе от получить метода действия в TriviaController. You will now inspect the details of the response from the Get action method in TriviaController.

Получение следующего вопроса данных через веб-API Retrieving the next question data through Web API

После завершения загрузки, вам будет предложено задать действие с помощью загруженного файла. Once the download finishes, you will be prompted to make an action with the downloaded file. Не закрывайте диалоговое окно, чтобы иметь возможность смотреть содержимое ответа через окно инструментов для разработчиков. Leave the dialog box open in order to be able to watch the response content through the Developers Tool window.

Теперь будет проверять текст ответа. Now you will inspect the body of the response. Чтобы сделать это, нажмите кнопку сведения вкладке и нажмите кнопку текст ответа. To do this, click the Details tab and then click Response body. Вы можете проверить, что загруженные данные — это объект со свойствами параметры (который приведен список TriviaOption объекты), идентификатор и title , которые соответствуют TriviaQuestion класса. You can check that the downloaded data is an object with the properties options (which is a list of TriviaOption objects), id and title that correspond to the TriviaQuestion class.

Текст ответа API Web просмотра Viewing Web API Response Body

Вернитесь к Visual Studio и нажать клавишу SHIFT + F5 остановить отладку. Go back to Visual Studio and press SHIFT + F5 to stop debugging.

Упражнение 2. Создание ОДНОСТРАНИЧНОГО интерфейса Exercise 2: Creating the SPA Interface

В этом упражнении следует построить веб интерфейсной части Quiz компьютерщик, уделяя основное внимание взаимодействия одностраничного приложения с помощью AngularJS. In this exercise you will first build the web front-end portion of Geek Quiz, focusing on the Single-Page Application interaction using AngularJS. Затем, улучшает взаимодействие с пользователем с помощью CSS3 выполнения широкие возможности анимации и предоставлять визуальный эффект переключения при переходе от одного вопроса к следующему контекста. You will then enhance the user experience with CSS3 to perform rich animations and provide a visual effect of context switching when transitioning from one question to the next.

Задача 1 – Создание интерфейса одностраничного приложения, с помощью AngularJS Task 1 – Creating the SPA Interface Using AngularJS

В этой задаче вы воспользуетесь AngularJS для реализации приложения Quiz Компьютерщик на стороне клиента. In this task you will use AngularJS to implement the client side of the Geek Quiz application. AngularJS — это фреймворк открытым исходным кодом JavaScript, который расширяет Браузерные приложения с Model-View-Controller (MVC) возможностей, упрощения разработки, так и тестирования. AngularJS is an open-source JavaScript framework that augments browser-based applications with Model-View-Controller (MVC) capability, facilitating both development and testing.

Начнем с установки AngularJS из консоли диспетчера пакетов Visual Studio. You will start by installing AngularJS from Visual Studio’s Package Manager Console. Затем вы создадите контроллера для обеспечения поведения приложения Компьютерщик головоломки и представления для отображения головоломки вопросы и ответы, используя модуль AngularJS шаблонов. Then, you will create the controller to provide the behavior of the Geek Quiz app and the view to render the quiz questions and answers using the AngularJS template engine.

Откройте Visual Studio Express 2013 для Web и откройте GeekQuiz.sln решение находится в источника/Ex2-CreatingASPAInterface/начало папки. Open Visual Studio Express 2013 for Web and open the GeekQuiz.sln solution located in the Source/Ex2-CreatingASPAInterface/Begin folder. Кроме того можно продолжить с решением, полученный в предыдущем упражнении. Alternatively, you can continue with the solution that you obtained in the previous exercise.

Откройте консоль диспетчера пакетов из средства > диспетчер пакетов NuGet. Open the Package Manager Console from Tools > NuGet Package Manager. Введите следующую команду, чтобы установить AngularJS.Core пакет NuGet. Type the following command to install the AngularJS.Core NuGet package.

В обозревателе решений, щелкните правой кнопкой мыши сценарии папке GeekQuiz проекта и выберите Add | Новая папка. In Solution Explorer, right-click the Scripts folder of the GeekQuiz project and select Add | New Folder. Назовите папку приложения и нажмите клавишу ввод. Name the folder app and press Enter.

Щелкните правой кнопкой мыши приложения только что созданной папке и выберите Add | Файл JavaScript. Right-click the app folder you just created and select Add | JavaScript File.

Создание нового файла JavaScript Creating a new JavaScript file

В указания имени элемента диалоговом окне головоломки контроллера в имя элемента текстовое поле и нажмите кнопку ОК. In the Specify Name for Item dialog box, type quiz-controller in the Item name text box and click OK.

Именование новый файл JavaScript Naming the new JavaScript file

В тест controller.js добавьте следующий код, чтобы объявить и инициализировать AngularJS QuizCtrl контроллера. In the quiz-controller.js file, add the following code to declare and initialize the AngularJS QuizCtrl controller.

(Code Snippet — AngularQuizController AspNetWebApiSpa — Ex2 —) (Code Snippet — AspNetWebApiSpa — Ex2 — AngularQuizController)

Функции-конструктора модуля QuizCtrl контроллера требуется injectable параметр с именем $scope. The constructor function of the QuizCtrl controller expects an injectable parameter named $scope. Начальное состояние области следует настроить в функции конструктора путем присоединения свойства $scope объекта. The initial state of the scope should be set up in the constructor function by attaching properties to the $scope object. Свойства содержат модель представленияи время регистрации контроллера будет доступен в шаблоне. The properties contain the view model, and will be accessible to the template when the controller is registered.

QuizCtrl контроллер определен в модуле с именем QuizApp. The QuizCtrl controller is defined inside a module named QuizApp. Модули — это единицы работы, которые позволяют разбить приложение на отдельные компоненты. Modules are units of work that let you break your application into separate components. Основные преимущества с помощью модулей, что код проще для понимания и упрощает модульное тестирование, возможность повторного использования и удобства поддержки. The main advantages of using modules is that the code is easier to understand and facilitates unit testing, reusability and maintainability.

Теперь поведение будет добавлена в область действия для реагирования на события, вызываемые из представления. You will now add behavior to the scope in order to react to events triggered from the view. Добавьте следующий код в конце QuizCtrl контроллера для определения nextQuestion работать в $scope объекта. Add the following code at the end of the QuizCtrl controller to define the nextQuestion function in the $scope object.

(Code Snippet — AngularQuizControllerNextQuestion AspNetWebApiSpa — Ex2 —) (Code Snippet — AspNetWebApiSpa — Ex2 — AngularQuizControllerNextQuestion)

Эта функция извлекает следующий вопрос из Trivia веб-API, созданный в предыдущем упражнении и присоединяет вопрос данные $scope объекта. This function retrieves the next question from the Trivia Web API created in the previous exercise and attaches the question data to the $scope object.

Вставьте следующий код в конце QuizCtrl контроллера для определения sendAnswer работать в $scope объекта. Insert the following code at the end of the QuizCtrl controller to define the sendAnswer function in the $scope object.

(Code Snippet — AngularQuizControllerSendAnswer AspNetWebApiSpa — Ex2 —) (Code Snippet — AspNetWebApiSpa — Ex2 — AngularQuizControllerSendAnswer)

Эта функция отправляет ответ, выбранный пользователем для Trivia веб-API и сохраняет результат — т. е. Если ответ правильный, или нет — в $scope объекта. This function sends the answer selected by the user to the Trivia Web API and stores the result –i.e. if the answer is correct or not– in the $scope object.

NextQuestion и sendAnswer функции выше используют AngularJS $http объекта, чтобы абстрагировать взаимодействие с веб-API через XMLHttpRequest Объект JavaScript в браузере. The nextQuestion and sendAnswer functions from above use the AngularJS $http object to abstract the communication with the Web API via the XMLHttpRequest JavaScript object from the browser. AngularJS поддерживает другую службу, которая обеспечивает более высокий уровень абстракции для выполнения операций CRUD для ресурса с помощью API-интерфейсов RESTful. AngularJS supports another service that brings a higher level of abstraction to perform CRUD operations against a resource through RESTful APIs. AngularJS $resource объект имеет методы действий, которые предоставляют общие поведения без необходимости взаимодействовать с $http объекта. The AngularJS $resource object has action methods which provide high-level behaviors without the need to interact with the $http object. Рассмотрите возможность использования $resource объекта в сценариях, который требует модели CRUD (fore сведения см. в разделе $resource документации). Consider using the $resource object in scenarios that requires the CRUD model (fore information, see the $resource documentation).

Следующий шаг — создать шаблон AngularJS, который определяет представление для головоломки. The next step is to create the AngularJS template that defines the view for the quiz. Чтобы сделать это, откройте Index.cshtml внутри представления | Главная папку и замените содержимое следующим кодом. To do this, open the Index.cshtml file inside the Views | Home folder and replace the content with the following code.

(Code Snippet — GeekQuizView AspNetWebApiSpa — Ex2 —) (Code Snippet — AspNetWebApiSpa — Ex2 — GeekQuizView)

Шаблон AngularJS — декларативный спецификации, которые используют сведения из модели и контроллера для преобразования статическую разметку в динамическое представление, которое пользователь видит в браузере. The AngularJS template is a declarative specification that uses information from the model and the controller to transform static markup into the dynamic view that the user sees in the browser. Ниже приведены примеры AngularJS элементов и атрибутов элемента, которые могут использоваться в шаблоне: The following are examples of AngularJS elements and element attributes that can be used in a template:

  • Ng-app директива указывает AngularJS элемент DOM, который представляет корневой элемент приложения. The ng-app directive tells AngularJS the DOM element that represents the root element of the application.
  • Ng-controller директива присоединяет контроллера в модель DOM в точке, где объявлен директивы. The ng-controller directive attaches a controller to the DOM at the point where the directive is declared.
  • Запись в фигурных скобках <<>> обозначает привязки для свойства области, указанных в этом контроллере. The curly brace notation << >> denotes bindings to the scope properties defined in the controller.
  • Щелчком ng директива используется для вызова функции, определенные в области действия в ответ на щелчок пользователя. The ng-click directive is used to invoke the functions defined in the scope in response to user clicks.

Откройте Site.css внутри содержимого папку и добавьте следующие выделенные стили в конце файла для предоставления внешнего вида и поведения для представления головоломки. Open the Site.css file inside the Content folder and add the following highlighted styles at the end of the file to provide a look and feel for the quiz view.

(Code Snippet — GeekQuizStyles AspNetWebApiSpa — Ex2 —) (Code Snippet — AspNetWebApiSpa — Ex2 — GeekQuizStyles)

Задача 2 – при запуске решения Task 2 – Running the Solution

В этой задаче, в которые будет выполнять решения с помощью нового пользователя интерфейс, созданный с помощью AngularJS, чтобы ответить на вопросы викторины вами. In this task you will execute the solution using the new user interface you built with AngularJS to answer some of the quiz questions.

Нажмите клавишу F5 для запуска решения. Press F5 to run the solution.

Зарегистрируйте новую учетную запись пользователя. Register a new user account. Чтобы сделать это, выполните действия для регистрации описано в упражнении 1, задача 3. To do this, follow the registration steps described in Exercise 1, Task 3.

Если вы используете решение из предыдущего упражнения, вы можете войти с учетной записью пользователя, которую вы создали ранее. If you are using the solution from the previous exercise, you can log in with the user account you created before.

Главная страница должна выглядеть, показывающий на первый вопрос головоломки. The Home page should appear, showing the first question of the quiz. Ответьте на вопрос, щелкнув один из вариантов. Answer the question by clicking one of the options. Это приводит к запуску sendAnswer функции, определенной ранее, но, которая отправляет выбранный параметр Trivia веб-API. This will trigger the sendAnswer function defined earlier, which sends the selected option to the Trivia Web API.

Ответы на вопросы Answering a question

Щелкните одну из кнопок и появится ответ. After clicking one of the buttons, the answer should appear. Нажмите кнопку следующий вопрос для отображения на следующий вопрос. Click Next Question to show the following question. Это приводит к запуску nextQuestion функции, определенной в контроллере. This will trigger the nextQuestion function defined in the controller.

Запрашивает следующий вопрос Requesting the next question

Должен появиться следующий вопрос. The next question should appear. По-прежнему ответы на вопросы столько раз, сколько требуется. Continue answering questions as many times as you want. После завершения работы все вопросы следует возвращать на первый вопрос. After completing all the questions you should return to the first question.

Следующий вопрос Next question

Вернитесь к Visual Studio и нажать клавишу SHIFT + F5 остановить отладку. Go back to Visual Studio and press SHIFT + F5 to stop debugging.

Задача 3 — Создание Переворачивающейся анимации, с помощью CSS3 Task 3 – Creating a Flip Animation Using CSS3

В этой задаче будет использовать свойства CSS3 для выполнения многофункциональных анимации путем добавления эффекта переворачивающейся, когда ответ на вопрос, и при извлечении следующий вопрос. In this task you will use CSS3 properties to perform rich animations by adding a flip effect when a question is answered and when the next question is retrieved.

Топ-пост этого месяца:  Как дополнить места, где искать шаблоны страниц

В обозревателе решений, щелкните правой кнопкой мыши содержимого папке GeekQuiz проекта и выберите Add | Существующий элемент. . In Solution Explorer, right-click the Content folder of the GeekQuiz project and select Add | Existing Item. .

Добавление существующего элемента в папку Content Adding an existing item to the Content folder

В добавить существующий элемент диалоговом окне перейдите к источника и ресурсы папку и выберите Flip.css. In the Add Existing Item dialog box, navigate to the Source/Assets folder and select Flip.css. Нажмите кнопку Добавить. Click Add.

Добавление файла Flip.css из ресурсов Adding the Flip.css file from Assets

Откройте Flip.css файл был только что добавили и проверьте его содержимое. Open the Flip.css file you just added and inspect its content.

Найдите перевернуть преобразование комментарий. Locate the flip transformation comment. Стили меньше этого комментария использовать CSS перспективы и rotateY преобразования для создания «карточка пролистывание» эффект. The styles below that comment use the CSS perspective and rotateY transformations to generate a «card flip» effect.

Найдите скрыть лицевой панели во время пролистывание комментарий. Locate the hide back of pane during flip comment. Стиль ниже этого комментария скрывает на обратной стороне лиц, когда они столкнулись в сторону от зрителя, задав противоположной видимость свойств CSS для скрытые. The style below that comment hides the back-side of the faces when they are facing away from the viewer by setting the backface-visibility CSS property to hidden.

Откройте BundleConfig.cs внутри приложения_запустить папку и добавьте ссылку на Flip.css файл «

/Content/css» стиля пакета Open the BundleConfig.cs file inside the App_Start folder and add the reference to the Flip.css file in the «

/Content/css» style bundle

Нажмите клавишу F5 для запуска решения и журналов с помощью учетных данных. Press F5 to run the solution and log in with your credentials.

Ответ на вопрос, щелкнув один из вариантов. Answer a question by clicking one of the options. Обратите внимание переворачивающейся эффект, во время перехода между представлениями. Notice the flip effect when transitioning between views.

Ответы на вопросы с переворачивающейся эффектом Answering a question with the flip effect

Нажмите кнопку следующий вопрос для извлечения на следующий вопрос. Click Next Question to retrieve the following question. Снова появится переворачивающейся эффект. The flip effect should appear again.

Получение на следующий вопрос с переворачивающейся эффектом Retrieving the following question with the flip effect

Сводка Summary

Выполнив этой практической работу вы узнали, как: By completing this hands-on lab you have learned how to:

angular 2 ngIf and CSS transition/animation

I want a div to slide in from the right in angular 2 using css.

I works fine if i only use [ngClass] to toggle class and utilise opacity. But li don’t want that element to be rendered from the beginning so I «hide» it with ngIf first, but then the transition wont’t work.

7 Answers 7

update 4.1.0

update 2.1.0

original

*ngIf removes the element from the DOM when the expression becomes false . You can’t have a transition on a non-existing element.

Use instead hidden :

According to the latest angular 2 documentation you can animate «Entering and Leaving» elements (like in angular 1).

Example of simple fade animation:

In relevant @Component add:

Do not forget to add imports

The relevant component’s html’s element should look like:

I built example of slide and fade animation here.

Explanation on ‘void’ and ‘*’:

  • void is the state when ngIf is set to false (it applies when the element is not attached to a view).
  • * — There can be many animation states (read more in docs). The * state takes precedence over all of them as a «wildcard» (in my example this is the state when ngIf is set to true ).

Notice (taken from angular docs):

Extra declare inside the app module, import < BrowserAnimationsModule >from ‘@angular/platform-browser/animations’;

Все о CSS анимациях

Одним из трех способов оживить контент в HTML является использование, так называемых, CSS анимаций. Принцип их работы достаточно прост. Они предоставляют возможность анимировать свойства CSS тех элементов, которые находятся под их влиянием.

Это позволяет вам создавать всевозможные классные штуки, например, заставлять объекты двигаться, исчезать и появляться, изменять цвет и т.п.

Сперва давайте взглянем на пример. Ниже показана CSS анимация, которая была применена к двум облакам, заставив их плавно покачиваться вверх и вниз.

В данном уроке вы узнаете все о CSS анимациях для того, чтобы создавать не только что-то простое, подобное движущимся облакам, но и что-то круче, полезнее и т.д. Вы узнаете, как определить CSS анимацию с помощью свойства animation, как работать с ключевыми кадрами, и как « дергать за веревочки » те свойства, которые связанны с анимацией, чтобы заставить вашу анимацию делать в точности то, что вы хотите.

Создание простой анимации

Самый простой (и самый веселый) способ узнать о CSS анимациях – просто взять готовый кусок работающего кода и потом разобраться, как все это работает. Итак, двигаемся дальше. Создаем новый HTML документ и добавляем следующий HTML и CSS код:

Если вы сделаете предварительный просмотр, то увидите чуть менее захватывающую версию примера, которого вы видели ранее.

Вы увидите отдельное, смещенное от центра облако, стоящее совершенно неподвижно:

Давайте продолжим и добавим анимацию, чтобы не умереть со скуки. Добавление анимации CSS выполняется в два шага. Первый шаг – это назначить свойство animation, а второй – установить ключевые кадры, которые определяют, что именно будет анимировано .

В созданной разметке найдите правило стиля #bigCloud и добавьте следующую выделенную строку:

Подробный разбор кода сейчас не важен, мы ознакомимся с ним позже, когда будет время. А пока что давайте добавим ключевые кадры.

Идем дальше и добавляем следующее правило стиля @keyframes :

Как только вы добавили это правило стиля, просмотрите вашу страницу. Вы должны увидеть ваше облако подпрыгивающим от счастья, словно у него нет никаких забот в этом мире. Супер!

Что это было

То, что вы только что сделали, было добавлением CSS анимации, заставившей ваше облако скакать. CSS анимация предельно проста. Она позволяет вам определить начальное состояние, несколько промежуточных состояний (они же ключевые кадры) и конечное состояние свойств того элемента, который вы желаете оживить. Движение нашего облака очень простое, поэтому изучение того, как оно « оживает », является отличным пунктом для отправления.

Первое, на что мы обратим внимание, само свойство animation:
animation: bobble 2s infinite ;

Свойство animation ответственно за установку вашей анимации. В сокращенном варианте, который вы будете обычно использовать, вы будете указывать следующие 3 величины:

  • имя вашей анимации;
  • продолжительность;
  • количество повторений анимации.

Объявление нашей анимации ничем не отличается. Имя анимации – bobble , продолжительность – 2 секунды, и она зациклена на бесконечное выполнение.

А что насчет вендорных префиксов?


Свойство animation довольно новое, поэтому многие браузеры требуют использовать с ним вендорный префикс, чтобы данное свойство работало надлежащим образом. Не захламляйте этим вашу разметку. Вместо этого пользуйтесь чем-нибудь вроде -prefix- free library , как в нашем примере, чтобы сохранить вашу разметку простой и в то же время позволить устаревшим браузерам воспроизводить вашу анимацию.

Как вы можете увидеть, объявление анимации не содержит много деталей о том, что же будет анимировано. Оно устанавливает высокоуровневое определение того, что ваша анимация будет делать, но сущность самой CSS анимации заключена в ее правиле @keyframes .

Давайте взглянем на наше правило @keyframes для более глубокого понимания:

Первая деталь, которая сразу же бросается в глаза, это структура правила. Снаружи правило содержит объявление @keyframes со следующим далее именем:

Внутри находятся правила стилей (или ключевые кадры), чьи селекторы могут быть выражены либо в процентах, либо с использованием ключевых слов from и to .

Эти правила стиля ключевых кадров значат намного больше, чем вы могли бы себе представить. Они содержат только такие CSS свойства как transform и animation-timing-function , значения которых будут применены, когда правило станет активным. Мы еще вернемся к этому вопросу, а пока есть одна важная деталь о правилах стиля ключевых кадров, с которой вас нужно познакомить.

Итак, все, что я объяснял до этого, было легким для понимания. А теперь обсудим кое-что, в чем немудрено запутаться. Несмотря на то, что свойство animation было объявлено в одном правиле стиля, а ваши ключевые кадры – в правиле @keyframes , они очень тесно связаны друг с другом, и один не функционирует в отсутствие другого.

Наверное, это было бы очень романтично, если бы не было так сложно и запутано. Но наша работа и заключается в том, чтобы разбираться в беспорядке, выяснять, что происходит, и, в конце концов, создавать еще больший беспорядок еще более запутанными путями.

Давайте сначала рассмотрим, как свойство animation и правило @keyframes связаны друг с другом.
Имя

Имя, которое вы дали правилу @keyframes , выступает в роли идентификатора, которым пользуется свойство animation, чтобы знать, где находятся ключевые кадры:

Это вовсе не совпадение, что наше свойство animation ссылается на bobble и имя правила @keyframes тоже bobble . Если есть какое-либо несовпадение в именах, ваша анимация не будет работать.

Продолжительность и ключевые кадры

Из предыдущего параграфа вы узнали, каким образом наше свойство animation осведомлено о его ключевых кадрах. Таким образом, одна загадка разрешена. И сейчас мы попробуем разоблачить еще большую тайну, связанную с продолжительностью анимации и моментом временем, когда правило стиля определенного ключевого кадра становится активным.

Как вы помните, когда мы определяем правила стиля ключевых кадров внутри @keyframes , селектор не выражен в реальной временной величине. Это либо процентное значение, либо ключевое слово from или to :

В нашем примере, процентные величины для селекторов ключевых кадров – это 0%, 50% и 100%. Они представляют собой процент завершенной анимации. Когда анимация только началась, у вас выполнено 0% от анимации. Ключевой кадр «0%» станет активным. Когда анимация достигает середины, ключевой кадр « 50% » становится активным. И наконец, в конце анимации, активизируется ключевой кадр « 100% ».

О селекторе from/to

Вместо определения 0% в роли селектора, вы можете использовать эквивалентное ключевое слово from. Для 100% есть ключевое слово to, которое тоже можно использовать как селектор. На самом деле, я не знаю, почему кто-либо захочет воспользоваться этим, но эти ключевые слова существуют, и если вы решили разобраться во всех дебрях, вам полезно знать об их существовании.

В этом уроке, я точно не буду воздавать дань уважения ключевым словам from и to. С этого момента они официально мертвы для меня, и об их существовании мы не будем больше вспоминать.

Значение продолжительности, которое вы определяете для свойства animation, кроме установки общего времени воспроизведения анимации, еще и помогает вам сопоставить процентные величины с действительными отрезками времени. Так обычно и делается.

Ниже показано, как наши процентные значения соотносятся с промежутками времени для нашей двухсекундной анимации:

Лично меня эта часть сбивает с толку. Если вы раз поняли, как продолжительность отображается в отдельные ключевые кадры, то вы преодолели главное препятствие в отчетливом представлении анимации в вашем воображении.

В любом случае, мы посмотрели достаточно подробно, как работает простая CSS анимация. Вы узнали все о том, как объявить анимацию с помощью свойства animation, и как выглядит правило @keyframes вместе с правилами стиля ключевых кадров. Также мы посвятили немного времени пониманию того, как отдельные части кода взаимосвязаны друг с другом.

Но мы еще не закончили. Есть еще, о чем поговорить более детально. Поэтому сделайте небольшой перерыв, чтобы быть в отличном состоянии для дальнейшего изучения CSS анимаций!

Детальный взгляд на CSS свойство animation

У свойства animation есть намного больше особенностей, чем вы только что видели. Теперь, когда вы уже « запачкали руки » в создании анимации, давайте сделаем что-нибудь менее захватывающее и узнаем все о свойстве animation. Для начала расширим наше сокращенное свойство и рассмотрим его в развернутом виде. Наша сокращенная версия выглядит так:

Три свойства нашей сокращенной версии развернулись в animation-name , animation-duration и animation-iteration-count . То, что эти свойства делают, к этому времени уже должно прочно укорениться в вашем мозгу. Поэтому давайте двигаться дальше и перейдем к задачам, использующим те свойства, которые мы еще не рассматривали, а именно: animation-play-state , animation-delay , animation-direction , animation-fill-mode и animation-timing-function .

Пауза и возобновление анимации

По умолчанию ваша анимация начнется, когда правило стиля, содержащее свойство animation, станет активным. В нашем простом случае это фактически означает момент загрузки страницы. Для начала давайте схематично представим двухсекундную анимацию, зацикленную на бесконечное выполнение:

Каждый желтый прямоугольник представляет собой 1 итерацию вашей анимации. Если вы поместите каждую итерацию анимации рядом с другой, то получите примерно то же самое, что я привел выше.

Если ваша анимация началась, она не остановится, пока не достигнет конца. Если ваша анимация зациклена, она просто продолжит выполняться с начала, как только достигнет конца. Этот цикл и показан в виде отдельного желтого прямоугольника.

Наша bobble анимация – живое подтверждение такого поведения.

Возможно, иногда вам не захочется, чтобы анимация вела себя подобным образом. Если вы хотите, чтобы ваша анимация не начиналась непосредственно после того, как правило стиля, содержащее определение вашей анимации, стало активным, или если вы хотите остановить вашу анимацию посередине, вы можете поколдовать со свойством animation-play-state. Это свойство позволяет переключать вашу анимацию на воспроизведение или паузу, посредством воздействия на значение running или значение paused.

По умолчанию свойство animation-play-state установлено в состояние running (воспроизведения). Вы можете установить значение paused, чтобы приостановить выполнение:

Когда анимация остановлена, она сохраняет самую последнюю вычисленную величину:

Почти как будто время остановилось. Вы можете возобновить его, установив свойство animation-play-state назад в running. При этом не произойдет внезапного перезапуска, как если бы анимация вернулась обратно в отметку 0% перед возобновлением:

Ваша анимация плавно продолжится с того места, где она была приостановлена – подобно тому, что бы вы ожидали, используя функции Play и Pause в медиаплеере.

Задержка и смещение анимации

Если вы хотите, чтобы анимация воспроизводилась, но не делала ничего в течение некоторого периода времени, то вы захотите познакомиться со свойством animation-delay . Это свойство позволяет определить, сколько секунд пройдет перед началом воспроизведения анимации.

Задержка — это не тот случай, когда задействуется ключевой кадр 0%, и затем вы ждете 5 секунд. Задержка происходит еще до того, как будет достигнут ключевой кадр 0% вашей первой итерации:

После начала воспроизведения анимации, значение задержки больше не используется. Каждая последующая итерация анимации (если есть таковая) просто плавно перетекает из конца одной в начало другой.

Есть еще кое-что, что можно сделать с этим свойством. Вместо определения положительной величины времени для animation-delay, вы можете задать с тем же успехом и отрицательное значение:

Когда вы задаете отрицательное значение, ваша анимация начинается без задержки, но со смещением длительностью, которую вы установили. Вот как будет выглядеть animation-delay со значением -.25 с:

Отрицательный знак играет роль сигнала для браузера, говоря ему о необходимости воспринимать эту величину как смещение, а не задержку. Да, это немного странно, особенно, если брать во внимание, что свойство по-прежнему называется animation-delay, но, как говорится, за что купил, за то и продаю.

Кое-что менее странное: если вы определите смещение больше, чем продолжительность отдельной итерации вашей анимации, то никаких проблем это не вызовет. Ваша анимация начнет воспроизводиться с того места некоторой итерации, которое выпало на начало.

Просто удостоверьтесь, что у вас есть достаточно итераций для отсчета будущей начальной точки. Если же у вас нет достаточного количества итераций, а вы задали большое смещение, ваша анимация попросту не будет воспроизводиться.

Сохраняйте свойства ключевых кадров, пожалуйста!

Если вы не зацикливаете анимацию, то вы заметите, что как только анимация закончилась, любые свойства, установленные ключевыми кадрами, сбрасываются, и ваши элементы возвращаются в прежнее состояние. Это происходит потому, что свойства, применяемые ключевыми кадрами, являются временными.

Они существуют, пока ключевые кадры активны, но в любой другой момент времени значения этих свойств не сохраняются. Может показаться, что ваша анимация внезапно перескакивает в позицию начала или внезапно сбрасывается после своего завершения.

Давайте исследуем два немного специфичных случая и затем посмотрим, как изменить такое поведение по умолчанию.

Ожидание начала

Первый случай имеет место, когда вы имеете дело с установкой animation-delay. Например, предположим, что вы определили 5-секундную задержку:

В течение 5 секунд ожидания ключевые кадры находятся в неактивном состоянии. Любые свойства, содержащиеся в первом ключевом кадре, не будут применены, пока задержка активна.

Анимация завершена

Второй случай – это, когда ваша анимация завершилась. Скажем, вы задали 3 повтора для вашей анимации:

В конце все свойства, установленные последним ключевым кадром на 3-ей итерации, исчезнут. Элемент, который вы анимировали, вернется в состояние, где ничего не будет напоминать об имевшей место анимации.

Знакомимся с animation-fill-mode

Если вы хотите, чтобы свойства начального ключевого кадра были применены уже во время задержки, или свойства последнего ключевого кадра сохранились по завершению анимации, вы можете установить свойство animation-fill-mode . Вы можете задать такие значения:

  • none
    Все остается по-прежнему. Если вы хотите применить значения свойств ключевого кадра, этот ключевой кадр должен быть активен;
  • forwards
    После того, как анимация завершится, любые значения свойств, имевшиеся в конце анимации, будут сохранены;
  • backwards
    Анимация применит значения для свойств из начального ключевого кадра, даже если кадр еще не активен;
  • both .

Это комплексное решение. Ваша анимация и применит значения к свойствам первого ключевого кадра в начале, и сохранит значения свойств последнего ключевого кадра в конце.

Анимации, созданные мною, зациклены на бесконечное повторение и не имеют задержки в начале. Многие другие анимации, которые я сделал, тоже не сильно различаются по значениям свойств в начальном и конечном ключевых кадрах и анимированных элементов в состоянии без анимации.

Вот почему я никогда не проводил ночей напролет, беспокоясь об этом, поэтому и вы не должны чувствовать себя обязанными объявлять свойство animation-fill-mode, если вы не хотите этого.

Реверс анимации (или перемена направлений)

Теперь давайте разберемся в одном немного странном свойстве. Анимация воспроизводится по умолчанию непрерывно от 0% до 100%. У вас есть возможность поменять такой порядок, установив свойство animation-direction в одно из следующих состояний: normal , reverse , alternate или alternate-reverse .

То, что делают normal и reverse, должно быть и так понятно, давайте рассмотрим более интересные значения: alternate и alternate-reverse.

Когда вы устанавливаете значение alternate-reverse для свойства animation-direction, ваша анимация начинается как обычно. Начиная со второй итерации, она меняет направление на противоположное, что повторяется для каждой последующей итерации:

Установка animation-direction в просто alternate даст похожее с небольшим отличием поведение:

Ваша анимация начнется с реверса, а затем будет менять направление между нормальным и противоположным.

Вольно, солдат!

Последнее свойство, связанное с анимацией, которые мы обсудим, это animation-timing-function. Эта функция позволит вам определить, как ваша анимация будет интерполировать значения свойств на отрезке времени между началом и концом. Я описал функции смягчения намного более детально в уроке Easing Functions in CSS3 (Функции смягчения в CSS3), поэтому за подробной информацией обращайтесь туда.

Сокращение анимации

То, что мы рассматривали до сих пор, является расширенным списком свойств для объявления анимации:

Кто-то, возможно, предпочтет использовать сокращенную версию свойств, когда все свойства и их значения определяются внутри самого свойства animation. Фактически, как вы помните, наша анимация bobble представлена в сокращенной форме:

Все расширенные свойства, которые вы видели до этого, могут быть представлены в сокращенной форме – только желаю вам удачи в их запоминании. Если вы не сомневаетесь во мне, то вот как выглядит их последовательность:

Просто подставляем соответствующую величину для свойства, заключенного в угловые скобки. Заметьте, что свойство animation-play-state не может быть записано в сокращенном варианте. Вам нужно будет явно записать это свойство и его значение.

Так или иначе, заменив наш расширенный вариант на сокращенный, мы получим следующее:

Сокращенная версия выглядит более компактно, чем эквивалентная ей расширенная версия? Безусловно! Она более понятна? А вот на этот вопрос сложнее найти ответ. Все зависит от ваших (или вашей команды) предпочтений.

В большинстве случаев мне нравится пользоваться сокращенной версией для определения свойств animation-name , animation-duration и animation-timing-function , которые мне легко запомнить. Как только я выхожу за пределы значений этих трех свойств, мне приходится обращаться к документации, чтобы узнать, на что ссылаются дополнительные величины.

Ваш разбег в объявлении свойств может варьироваться с учетом ваших взглядов на форму записи (сокращенная или расширенная), так что используйте то, с чем вы чувствуете себя комфортно. И…блестяще уяснив эту часть, самое время попрощаться с детальным разбором свойства animation и сосредоточиться на других достопримечательностях нашего нескончаемого живописного путешествия по стране анимации.

Взглянем на ключевые кадры

Большую часть времени мы провели, разбираясь в свойстве animation, и в том, как оно влияет на анимацию. А настоящие герои CSS анимации – это ключевые кадры. Поэтому давайте уделим им максимум внимания в этой секции.

Скажем привет (снова) ключевым кадрам bobble:

Ранее я упоминал, что отдельный ключевой кадр очень похож на правило стиля. Вы вставляете CSS свойства внутрь него, и эти свойства активизируются, когда селектор для этого ключевого кадра становится активным. Следует отметить, что не все CSS свойства могут быть определены внутри ключевого кадра. Вы можете определить только « анимируемые » CSS свойства и свойство animation-timing-function .

Это не такая уж плохая новость, я уверен, что свойства, которые вы хотели использовать в вашем ключевом кадре, входят в список разрешенных для анимации. Вы можете посмотреть полный список « анимируемых » свойств здесь и несколько дополнительных здесь (обратите внимание на значение в колонке, помеченной как Anim.)

Последнее, что нам нужно посмотреть, это свойство animation-timing-function , которое вы также можете задать в ключевом кадре.

Это свойство определяет переход из текущего ключевого кадра в следующий. Обращаясь к нашему примеру, в ключевом кадре 0% animation-timing-function установлено в значение в ease-in:

Эта функция времени будет активна, когда анимация перейдет от 0% к следующему ключевому кадру с отметкой 50%. Более того, animation-timing-function, объявленная в ключевом кадре 50%, станет активной при переходе от 50% к 100%. С учетом того, что функция времени работает между текущим ключевым кадром и следующим, объявление временной функции в ключевом кадре 100% не имеет смысла.

Повторное использование ключевых кадров

И последнее, о чем я хочу поговорить, это использование одних и тех же ключевых кадров для объявления других анимаций. Я уже сетовал на то, что разрозненность объявления свойства animation от фактического правила @keyframes делает работу с анимацией немного неудобной. Но даже в неудобствах можно найти позитивные моменты, если сильно постараться.

Топ-пост этого месяца:  Урок 29. Регистрация. Часть 3

Один из таких моментов – это возможность повторного использования одинаковых ключевых кадров для разных объявлений свойства animation. Может быть это трудно представить, поэтому давайте расширим наш текущий пример, чтобы осветить то, о чем я говорю.

В ваш текущий HTML документ, содержащий только одно покачивающееся облако, добавьте выделенные строки:

Как только вы добавили и выделенное правило стиля #smallCloud , и второй элемент img, сделайте предварительный просмотр страницы. Если все было сделано правильно, вы увидите два счастливо покачивающихся облачка, похожих на те, что вы видели в примере в начала этого урока.

Теперь, когда ваш пример работает, давайте посмотрим, как же нам это удалось. Хитрость заключается в объявлении animation в нашем правиле стиля #smallCloud :

Заметьте, что мы ссылаемся точно то же правило @keyframes по имени bobble. Единственным отличием между этим объявлением анимации и объявлением в правиле стиля #bigCloud является продолжительность. Продолжительность анимации, применяемой к маленькому облаку, – 4 секунды, в 2 раза больше, чем к большому облаку:

Это значит, что свойства, которые вы определили в ключевых кадрах bobble, будут применены к обоим нашим облакам. Разница только в том, что в одной анимации эти ключевые кадры воспроизводится в течение 2 секунд, а в другой – в течение 4 секунд:

Независимость между ключевыми кадрами и объявлением анимации позволяет применять подобные приемы. Любые изменения, которые вы вносите в объявление свойства animation, будут влиять на ваши ключевые кадры лишь на поверхностном уровне, как, например, это произошло с продолжительностью. Все свойства анимации, которые я объяснял несколькими секциями ранее, могут быть определены таким образом, что изменят поведение ключевых кадров, не касаясь напрямую самих кадров. Признайте, ведь это круто.

Объявление нескольких анимаций

И последняя вещь (да-да, правда, последняя), которую мы по-быстрому разберем – как объявить несколько анимаций в одном свойстве animation. В сокращенной форме объявления мы просто перечисляем каждую анимацию через запятую, вот так:

Заметьте, что каждая анимация указывает на разное правило @keyframes . Если по какой-то причине вы решите указывать на одно и то же правило @keyframes из одного объявления свойства animation, то согласно порядку приоритетов в CSS, в силу вступит самое последнее объявление.

Объявляя анимацию в расширенной версии, вы бы сделали следующее:

Опять-таки здесь ничего сложного. Все в CSS разделяется с помощью запятых, поэтому если сомневаетесь, как объявить несколько значений для свойства, поддерживающего такую функцию, просто добавьте запятую.
Заключение

Свойство animation в CSS – это очень важное свойство, о котором нужно знать больше, особенно, если вы хотите оживить ваш контент.

Данная публикация представляет собой перевод статьи « All About CSS Animations » , подготовленной дружной командой проекта Интернет-технологии.ру

Стайлинг и анимация (Angular 2 и Angular 4)

Styling & Animations (for Angular 2 and Angular 4) (Ангельский)

Вы закончили бизнес-логику своего приложения и думаете что все готово, не так ли? А вот Нет! Добавление стилей и анимаций приложению значительно улучшает пользовательский интерфейс!

Это больше, чем просто дизайн — анимация и стили помогают пользователю понять суть вашей страницы, передавать посыл пользователю и в целом улучшать удобство использования вашей страницы.

В этом курсе вы узнаете какие инструменты Angular предоставляют вам возможность динамически стилить и анимировать страницы. Это не базовый курс CSS — этот курс действительно погрузится в богатый набор инструментов Angular ships, что позволит вам создать реактивные, дружественные к пользователю веб-приложения.

Просто подумайте о ваших любимых веб-приложениях. Сколько из них выглядит уродливо, что кажеться они стилизованы случайным образом и не используют анимацию? Наверное вы встречали такие приложения. Этот курс создан для того чтобы исправить эту ситуацию.

CSS-анимации

CSS позволяет создавать простые анимации без использования JavaScript.

JavaScript может быть использован для управления такими CSS-анимациями. Это позволяет делать более сложные анимации, используя небольшие кусочки кода.

CSS-переходы

Идея CSS-переходов проста: мы указываем, что некоторое свойство должно быть анимировано, и как оно должно быть анимировано. А когда свойство меняется, браузер сам обработает это изменение и отрисует анимацию.

Всё что нам нужно, чтобы начать анимацию – это изменить свойство, а дальше браузер сделает плавный переход сам.

Например, CSS-код ниже анимирует трёх-секундное изменение background-color :

Теперь, если элементу присвоен класс .animated , любое изменение свойства background-color будет анимироваться в течение трёх секунд.

Нажмите кнопку ниже, чтобы анимировать фон:

Существует 4 свойства для описания CSS-переходов:

  • transition-property – свойство перехода
  • transition-duration – продолжительность перехода
  • transition-timing-function – временная функция перехода
  • transition-delay – задержка начала перехода

Далее мы рассмотрим их все, а сейчас ещё заметим, что есть также общее свойство transition , которое позволяет задать их одновременно в последовательности: property duration timing-function delay , а также анимировать несколько свойств одновременно.

Например, у этой кнопки анимируются два свойства color и font-size одновременно:


Теперь рассмотрим каждое свойство анимации по отдельности.

transition-property

В transition-property записывается список свойств, изменения которых необходимо анимировать, например: left , margin-left , height , color .

Анимировать можно не все свойства, но многие из них. Значение свойства all означает «анимируй все свойства».

transition-duration

В transition-duration можно определить, сколько времени займёт анимация. Время должно быть задано в формате времени CSS: в секундах s или миллисекундах ms .

transition-delay

В transition-delay можно определить задержку перед началом анимации. Например, если transition-delay: 1s , тогда анимация начнётся через 1 секунду после изменения свойства.

Отрицательные значения также допустимы. В таком случае анимация начнётся с середины. Например, если transition-duration равно 2s , а transition-delay – -1s , тогда анимация займёт одну секунду и начнётся с середины.

Здесь приведён пример анимации, сдвигающей цифры от 0 до 9 с использованием CSS-свойства transform со значением translate :

Свойство transform анимируется следующим образом:

В примере выше JavaScript-код добавляет класс .animate к элементу, после чего начинается анимация:

Можно начать анимацию «с середины», с определённого числа, например, используя отрицательное значение transition-delay , соответствующие необходимому числу.

Если вы нажмёте на цифру ниже, то анимация начнётся с последней секунды:

JavaScript делает это с помощью нескольких строк кода:

transition-timing-function

Временная функция описывает, как процесс анимации будет распределён во времени. Будет ли она начата медленно и затем ускорится или наоборот.

На первый взгляд это очень сложное свойство, но оно становится понятным, если уделить ему немного времени.

Это свойство может принимать два вида значений: кривую Безье или количество шагов. Давайте начнём с кривой Безье, как с наиболее часто используемой.

Кривая Безье

Временная функция может быть задана, как кривая Безье с 4 контрольными точками, удовлетворяющими условиям:

  1. Первая контрольная точка: (0,0) .
  2. Последняя контрольная точка: (1,1) .
  3. Для промежуточных точек значение x должно быть 0..1 , значение y может принимать любое значение.

Синтаксис для кривых Безье в CSS: cubic-bezier(x2, y2, x3, y3) . Нам необходимо задать только вторую и третью контрольные точки, потому что первая зафиксирована со значением (0,0) и четвёртая – (1,1) .

Временная функция описывает то, насколько быстро происходит анимации во времени.

  • Ось x – это время: 0 – начальный момент, 1 – последний момент transition-duration .
  • Ось y указывает на завершение процесса: 0 – начальное значение свойства, 1 – конечное значение.

Самым простым примером анимации является равномерная анимация с линейной скоростью. Она может быть задана с помощью кривой cubic-bezier(0, 0, 1, 1) .

Вот как выглядит эта «кривая»:

…Как мы видим, это прямая линия. Значению времени ( x ) соответствует значение завершённости анимации ( y ), которое равномерно изменяется от 0 к 1 .

В примере ниже поезд «едет» слева направо с одинаковой скоростью (нажмите на поезд):

Animations: the Angular Way

Easily manage projects with monday.com

ngAnimate and the $animate Service

The Angular core team gave us the ngAnimate module so that we could give our apps a way to animate from a data driven ‘Angular way’, and so that we could hook into the events that Angular emits through some of its built-in directives.

Angular, unlike jQuery, focuses on binding our view to a JavaScript object through the use of controllers. This approach allows us to bind view values like input fields directly to a corresponding value in a JavaScript object and trigger view changes through data changes, or vice versa.

So then, just how do we hook animations into these events if they could happen from either the view or the corresponding object being changed?

First, we need to add ngAnimate to our project.

Including Angular Animation in our Project

As of 1.2.0, animations are no longer part of the Angular core, but are instead in their own separate module: ngAnimate . In order to use the $animate service, we need to include the animation library after Angular in our HTML file, like this: js/lib/angular-animate.js

As an alternative, you can also use the CDN or bower to install angular-animate :

However you choose to install it, make sure to include it in your source file, like so:

Next, we will have to include the ngAnimate module as a dependency to our app. This can be done when we instantiate our Angular app, like so:

Now that ngAnimate is included in our project (and as long as we do not have an injector error or something like that in our console) we can begin to create animations with Angular!

CSS3 Transitions

The easiest way to include animations in any application is by using CSS3 transitions. This is because they are completely class-based, which means that the animation is defined in a class and, as long as we use that class in our HTML, the animation will work in the browser.

CSS transitions are animations that allow an HTML element to steadily change from one style to another. To define a transition, we need to specify the element we want to add an effect to, and the duration of said effect.

First, let’s take a look at a simple example of a CSS3 transition, and then we can see how to make use of this knowledge from a data-driven Angular app.

Let’s create a simple div inside a container div and apply two classes to it: one for basic styling and one for our transition.

Now we can add transitions for either the hover state or static state of the element:

This applies two states to our div : one normal state and one for when we hover over the div . The transitions defined in the .rotate and .rotate:hover classes tell the browser how to transition between these two states when we trigger the hover and mouseleave events.

We end up with an effect like this:

Basic CSS3 Transition

Angular Data-Driven CSS3 Animation

Now let’s see how we could do something like that in an Angular app, and bind this same functionality to some data within our application.

Instead of doing this transition on :hover , we can create a simple animation by binding transitions to one class, .rotate , and create a class for both the «box» and «circle» states of the div . This enables us to switch between classes using the ng-class directive built into Angular.

To do this, we will need to set up our Angular app and create a conditional statement in the ng-class directive to switch the class based on the value of a boolean on the $scope .

Now let’s set up our JavaScript:

Here, we bind the boolean value that is attached to $scope.boxClass to whether or not the element should have the .box or .circle class. If the boolean is true, then the element will have the .box class. If it is false, it will have the .circle class. This allows us to trigger a CSS3 transition by changing the value of our data, with no DOM manipulation whatsoever.

This does not use the $animate service, but I wanted to provide an example of an instance that you could use CSS3 alone and not have to rely on $animate and ngAnimate .

The result of this is an animation that is triggered strictly by a data change when we change the underlying boolean by clicking the checkbox.

Angular Data-Driven CSS3 Transition

Transitions with $animate

If we want to leverage CSS3 transitions and the $animate service, then we need to know a couple things about how $animate works behind the scenes.

The $animate service supports several directives that are built into Angular. This is available without any other configuration, and allows us to create animations for our directives in plain CSS. To use animations in this way, you do not even need to include $animate in your controller; just include ngAnimate as a dependency of your Angular module.

Once you include ngAnimate in your module, there is a change in how Angular handles certain built-in directives. Angular will begin to hook into and monitor these directives, and add special classes to the element on the firing of certain events. For example, when you add, move, or remove an item from an array which is being used by the ngRepeat directive, Angular will now catch that event, and add a series of classes to that element in the ngRepeat .

Here you can see the classes that ngAnimate adds on the enter event of an ngRepeat :

ngRepeat Event Classes

The attached CSS classes take the form of ng- and ng--active for structural events like enter, move, or leave. But, for class-based animations, it takes the form of -add , -add-active , -remove , and -remove-active . The exceptions to these rules are ng-hide and ng-show . Both of these directives have add and remove events that are triggered, just like ng-class , but they both share the .ng-hide class, which is either added or removed when appropriate. You will also see ngAnimate add a .ng-animate class to some of these directives on animation.

Below is a table that illustrates some of the built-in directives, the events that fire, and classes that are temporarily added when you add ngAnimate to your project:

Built-In Directives’ $animate Events

Directive Event(s) Classes
ngRepeat enter ng-enter, ng-enter-active
leave ng-leave, ng-leave-active
move ng-move, ng-move-active
ngView, ngInclude, ngSwitch, ngIf enter ng-enter, ng-enter-active
leave ng-leave, ng-leave-active
ngClass add ng-add, ng-add-active
remove ng-remove, ng-remove-active
ngShow, ngHide add, remove ng-hide

Angular will automatically detect that CSS is attached to an animation when the animation is triggered, and add the .ng--active class until the animation has run its course. It will then remove that class, and any other added classes, from the DOM.

Below is an example of using CSS3 transitions to animate a ngRepeat directive. In it, we attach a transition to the base class— .fade in this case—and then piggyback off of the classes that ngAnimate will add to the li elements when they are added and removed from the array. Once again, this allows us to have data-driven animations — the Angular way.

ngRepeat $animate Powered CSS3 Transitions

As we can see, Angular’s ngAnimate gives us the ability to easily tap into events and leverage the power of CSS3 transitions to do some really cool, natural animations on our directives. This is by far the easiest way we can do animations for our Angular apps, but now we will look at some more complex options.

CSS3 Animations

CSS3 animations are more complicated than transitions, but have much of the same implementation on the ngAnimate side. However, in the CSS we will be using an @keyframes rule to define our animation. This is done in much the same way that we did our basic transition earlier, except we use the animation keyword in our CSS and give the animation a name like this:

Here we have created an appear and disappear animation that can be triggered through CSS in the place that our transition was before.

The difference this time, as you can see above, is that we no longer have to use .ng-enter-active or .ng-leave-active , but rather we can attach the animation to .ng-leave and .ng-active and the animation will trigger at the appropriate times because of ngAnimate . This is not a particularly better way to do it than our transition method above, but it illustrates how to use CSS3 animations, which can be MUCH more powerful than this simple effect.

The final result of this animation when applied to our previous grocery list ngRepeat example will look something like this:

ngRepeat $animate Powered CSS3 Animations

JavaScript Animations

Now for the elephant in the room: JavaScript animations with AngularJS.

Angular is entirely data-driven with its fancy two-way data binding—that is, until it isn’t. This is one of the most confusing things about coming from jQuery to Angular. We are told to re-learn how we think and throw out DOM manipulation in favor of bindings, but then, at some point, they throw it right back at us later. Well, welcome to that full-circle point.

JavaScript animation has one major advantage—JavaScript is everywhere, and it has a wider acceptance than some advanced CSS3 animations. Now, if you are just targeting modern browsers, then this probably won’t be an issue for you, but if you need to support browsers that do not support CSS transitions, then you can easily register a JavaScript animation with Angular and use it over and over in your directives. Basically, JavaScript has more support in older browsers, and therefore, so do JavaScript animations.

When you include ngAnimate as a dependency of your Angular module, it adds the animation method to the module API. What this means is that you can now use it to register your JavaScript animations and tap into Angular hooks in built-in directives like ngRepeat . This method takes two arguments: className(string) and animationFunction(function) .

The className parameter is simply the class that you are targeting, and the animation function can be an anonymous function that will receive both the element and done parameters when it is called. The element parameter is just that, the element as a jqLite object, and the done parameter is a function that you need to call when your animation is finished running so that angular can continue on it’s way and knows to trigger that the event has been completed.

The main thing to grasp here however, is what needs to be returned from the animation function. Angular is going to be looking for an object to be returned with keys that match the names of the events that you want to trigger animations on for that particular directive. If you are unsure what the directive supports, then just refer to my table above.

So for our ngRepeat example, it would look something like this:

And if we tie this all together with the same old boring (sorry) ngRepeat grocery list example and use jQuery for the actual animations:

Now, let me break down what is going on.

We can get rid of any CSS we previously had on the .fade class, but we still need some kind of class to register the animation on. So, for continuity’s sake, I just used the good old .fade class.

Basically, what happens here is that Angular will register your animation functions and call them on that specific element when that event takes place on that directive. For example, it will call your enter animation function when a new item enters an ngRepeat .

These are all very basic jQuery animations and I will not go into them here, but it is worth noting that ngRepeat will automatically add the new item to the DOM when it is added to the array, and that said item will be immediately visible. So, if you are trying to achieve a fade in effect with JavaScript, then you need to set the display to none immediately before you fade it in. This is something you could avoid with CSS animations and transitions.

Let’s tie it all together and see what we get:

ngRepeat $animate Powered JavaScript Animations

Conclusion

The ngAnimate module is a bit of a misleading name.

Granted, I could not come up with a better name if I tried, but it does not actually DO any animations. Rather, it provides you with access into Angular’s event loop so that you can do your own DOM manipulation or CSS3 animations at the proper, data-driven point. This is powerful in its own right because we are doing it ‘the Angular way’ instead of trying to force our own logic and timing onto a very particular framework.

Another benefit of doing your animations with ngAnimate is that once you write your animations for that directive, they can be packed up nicely and moved on to other projects with relative ease. This, in my book, is always a good thing.

Angular 5 Material для начинающих

Данный материал посвящен изучению Angular 5 Material. В примере будет использоваться именно пятая версия, потому что с новыми релизами появляются все новые и новые возможности в фреймворке. Так, например, переход с AngularJS на Angular 2 ознаменовался полной переработкой всего фреймворка.

Начало работы с Angular 5 Material

Для начала необходимо установить Angular CLI глобально во всей системе. Для этого нужно выполнить следующую команду:

Также вы можете ознакомиться с полной документацией по установке на сайте разработчиков.

Создание проекта

В командной строке выполните следующую команду:

С её помощью мы создадим новый проект. Все нужные компоненты приложения будут сгенерированы автоматически.

Установка Angular Material и Angular CDK

В командной строке введите команду для установки компонентов и их зависимостей:

Установка модуля Animations

Для работы с Angular Material нужно установить модуль Animations:

Теперь надо импортировать модули в файле app.module.ts :

Затем нужно добавить новый модуль, который будет отвечать за Angular Material Components. Для этого создется файл в src/app с именем ngmaterial.module.ts :

Теперь модуль MatButtonModule добавлен в приложение. Далее надо
зарегистрировать MaterialAppModule в app.module.ts :

Подключение тем оформления

Для корректной работы тем оформления требуется подключение всех стилей темы глобально в приложении.

Для примера будем использовать заранее подготовленную тему Angular Material Indigo-Pink. Подключим ее в приложение, добавив следующую строку в style.css :

Также подключим поддержку иконок в стиле material. Для этого добавим следующую строку в index.html :

Поддержка жестов

Некоторые элементы ( mat-slide-toggle , mat-slider , matTooltip ) используют HammerJS для обработки жестов. Для полной поддержки возможностей этих элементов надо подключить HammerJS в приложение.

Это можно сделать несколькими способами: через npm, с использованием CDN (например Google CDN) или же напрямую из приложения.

Добавить комментарий