{"id":999,"date":"2016-09-12T10:24:31","date_gmt":"2016-09-12T08:24:31","guid":{"rendered":"http:\/\/blog.thecodecampus.de\/?p=999"},"modified":"2025-07-03T09:39:50","modified_gmt":"2025-07-03T07:39:50","slug":"angular-2-animate-creating-sliding-side-navigation","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/angular-2-animate-creating-sliding-side-navigation\/","title":{"rendered":"Angular 2 Animate Example: Creating a Sliding Side Navigation Tutorial"},"content":{"rendered":"

\"Example\"<\/a><\/p>\n

 <\/p>\n

 <\/p>\n

#1 Project Setup<\/h1>\n

Animations in Angular 2 are probably easier than you think. In this tutorial we will create a simple side navigation that will leave and enter the screen from the right side. We will use Angular-CLI and TypeScript but you should also be able to adopt the steps to any other project like Ionic 2.
\n<\/p>\n

First of all install the latest version of the Angular-CLI. Currently the project is under heavy development. Please make sure to get at least\u00a0version 1.0.0-beta.11-webpack.8\u00a0or higher. To print out your current version use ng --version<\/code>.<\/p>\n

\"cli-version\"<\/a><\/p>\n

If your version is older, remove it, clear the npm cache and reinstall with the following commands:<\/p>\n

npm uninstall -g angular-cli\r\nnpm cache clean\r\nnpm install -g angular-cli@1.0.0-beta.11-webpack.8\r\n\r\n<\/pre>\n
Right now it is required to give the full version in the npm install command, otherwise you will get an old version!\u00a0<\/strong>You can check for the latest version number <\/span>here<\/a>.<\/span><\/p>\n
\n<\/picture> <\/picture> \"Angular<\/picture> <\/a><\/p>\n
 <\/p>\n
#2\u00a0Required Markup<\/h1>\n
Since our toolchain is now set up, lets kick of a fresh project with Angular-CLI\u00a0and\u00a0add the required markup for our example.<\/p>\n
ng new angular-2-animate-tutorial\r\ncd\u00a0angular-2-animate-tutorial\r\nng serve\r\n<\/pre>\n
Your app is now running at localhost:4200.<\/p>\n
httOpen a new console window and create the menu component:<\/p>\n
ng generate component menu\r\n<\/pre>\n
Now include the generated menu to your app:<\/p>\n
<h1>\r\n  {{title}}\r\n<\/h1>\r\n\r\n<app-menu><\/app-menu>\r\n<\/pre>\n
Add some menu points to the menu:<\/p>\n
<ul>\r\n  <li>Menu Item<\/li>\r\n  <li>Menu Item<\/li>\r\n  <li>Menu Item<\/li>\r\n  <li>Menu Item<\/li>\r\n  <li>Menu Item<\/li>\r\n  <li>Menu Item<\/li>\r\n<\/ul>\r\n<\/pre>\n
And some styles:<\/p>\n
:host {\r\n  background: #1a2580;\r\n  color: #fff;\r\n  position: fixed;\r\n  left: auto;\r\n  top: 0;\r\n  right: 0;\r\n  bottom: 0;\r\n  width: 20%;\r\n  min-width: 250px;\r\n  z-index: 9999;\r\n  font-family: Arial, \"Helvetica Neue\", Helvetica, sans-serif;\r\n}\r\n\r\nul {\r\n  font-size: 18px;\r\n  line-height: 3;\r\n  font-weight: 400;\r\n  padding-top: 50px;\r\n  list-style: none;\r\n}\r\n<\/pre>\n
 <\/p>\n
Your output should now look like mine:<\/p>\n
\"added-sidebar\"<\/a><\/p>\n
Now we need a toggle button:<\/p>\n
<button (click)=\"toggleMenu()\" class=\"hamburger\">\r\n  <span>toggle menu<\/span>\r\n<\/button>\r\n\r\n<h1>\r\n  {{title}}\r\n<\/h1>\r\n\r\n<app-menu><\/app-menu>\r\n<\/pre>\n
.hamburger {\r\n  display: block;\r\n  position: relative;\r\n  overflow: hidden;\r\n  margin: 0;\r\n  padding: 0;\r\n  width: 96px;\r\n  height: 96px;\r\n  font-size: 0;\r\n  text-indent: -9999px;\r\n  cursor: pointer;\r\n  outline: none;\r\n  background: none;\r\n  border: 0;\r\n}\r\n\r\n\r\n.hamburger span {\r\n  display: block;\r\n  position: absolute;\r\n  top: 44px;\r\n  left: 18px;\r\n  right: 18px;\r\n  height: 8px;\r\n  background: #1a2580;\r\n}\r\n\r\n.hamburger span::before,\r\n.hamburger span::after {\r\n  display: block;\r\n  position: absolute;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 8px;\r\n  background-color: #1a2580;\r\n  content: \"\";\r\n}\r\n\r\n.hamburger span::before {\r\n  top: -20px;\r\n}\r\n\r\n.hamburger span::after {\r\n  bottom: -20px;\r\n}\r\n<\/pre>\n
Result:<\/p>\n
\"add-hamburger\"<\/a><\/p>\n
 <\/p>\n
 <\/p>\n
#3 Animations<\/h1>\n
This completes our dummy markup. Now it is time to get started with the actual animation. First of all we need to declare some imports in the component responsible for the animation. This will be our app.component. And create\u00a0the toggleMenu<\/code> method.<\/p>\n
import {Component, trigger, state, style, transition, animate} from '@angular\/animations';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css']\r\n})\r\nexport class AppComponent {\r\n  title = 'app works!';\r\n  \r\n  toggleMenu() {\r\n    \r\n  }\r\n}\r\n<\/pre>\n
Since our side navigation is located on the right side of the screen we want it be hidden by default and then slide in from the right side on toggle. There is no need to use *NgIf or something else. We simply move the navigation off the canvas to the right side by using transform:translate<\/code>. On toggle the navigation will slide back in by resetting the transform to zero.
\nThe animation is declared in the component decorator in app.component.ts and then applied to the planned HTML\u00a0element using the [@] syntax.<\/p>\n
Add the animation definition:<\/p>\n
import {Component, trigger, state, style, transition, animate} from '@angular\/animations';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css'],\r\n  animations: [\r\n    trigger('slideInOut', [\r\n      state('in', style({\r\n        transform: 'translate3d(0, 0, 0)'\r\n      })),\r\n      state('out', style({\r\n        transform: 'translate3d(100%, 0, 0)'\r\n      })),\r\n      transition('in => out', animate('400ms ease-in-out')),\r\n      transition('out => in', animate('400ms ease-in-out'))\r\n    ]),\r\n  ]\r\n})\r\nexport class AppComponent {\r\n  title = 'app works!';\r\n\r\n  toggleMenu() {\r\n\r\n  }\r\n}\r\n<\/pre>\n
Now we need a variable that holds the current state of the animation (‚in‘ or ‚out‘). This will be later toggled. The initial state should be ‚out‘ in order to hide the navigation by default. Also we are adding now the logic of the toggleMenu method, it will simply toggle the states value.<\/p>\n
import {Component, trigger, state, style, transition, animate} from '@angular\/animations';\r\n\r\n@Component({\r\n  selector: 'app-root',\r\n  templateUrl: '.\/app.component.html',\r\n  styleUrls: ['.\/app.component.css'],\r\n  animations: [\r\n    trigger('slideInOut', [\r\n      state('in', style({\r\n        transform: 'translate3d(0, 0, 0)'\r\n      })),\r\n      state('out', style({\r\n        transform: 'translate3d(100%, 0, 0)'\r\n      })),\r\n      transition('in => out', animate('400ms ease-in-out')),\r\n      transition('out => in', animate('400ms ease-in-out'))\r\n    ]),\r\n  ]\r\n})\r\nexport class AppComponent {\r\n  title = 'app works!';\r\n\r\n  menuState:string = 'out';\r\n\r\n  toggleMenu() {\r\n    \/\/ 1-line if statement that toggles the value:\r\n    this.menuState = this.menuState === 'out' ? 'in' : 'out';\r\n  }\r\n}\r\n<\/pre>\n
That’s pretty much it. Last step is to add the animation to the component call in our HTML markup using the already mentioned @ syntax. The first part matches the animations name and the given parameter is the value (‚out‘ or ‚in‘) from our component.<\/p>\n
<app-menu [@slideInOut]=\"menuState\"><\/app-menu>\r\n<\/pre>\n
Before you ship this to production make sure to have the webanimations polyfill included, e.g. by adding this to your index.html:<\/p>\n
<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/web-animations\/2.2.2\/web-animations.min.js\"><\/script>\r\n<\/pre>\n
 <\/p>\n
 <\/p>\n
#4 Final Result:<\/h1>\n
\n