Ir al contenido principal

AngularJS: Animate

Animate

  • Add ngAnimate to the application 
    • angular-animate.min.js
    • var app = angular.module('app', [ 'ngRoute', 'ngAnimate' ]);

  • Implement the $routeProvider
    • Ex.
    • $routeProvider

        // home page
        .when('/', {
            templateUrl: 'page-home.html',
            controller: 'mainController'
        })
  • Add the property pageClass to establish the animation  
    • app.controller('aboutController', function($scope) {
    $scope.pageClass = 'page-about';
});
  • In the ngView load the property: pageClass
<body ng-app="animateApp">

    <!-- inject our views using ng-view -->
    <!-- each angular controller applies a different class here -->
    <div class="page {{ pageClass }}" ng-view></div>

</body>

  • Add the Css style
/* ANIMATIONS
============================================================================= */

.page.ng-leave { z-index:9999; }
.page.ng-enter { z-index:8888; }

/* page specific animations ------------------------ */

/* home -------------------------- */
.page-home.ng-leave         {
    -webkit-transform-origin: 0% 0%;
-webkit-animation: rotateFall 1s both ease-in;
-moz-transform-origin: 0% 0%;
-moz-animation: rotateFall 1s both ease-in;
transform-origin: 0% 0%;
animation: rotateFall 1s both ease-in;
}
.page-home.ng-enter {  
    -webkit-animation:scaleUp 0.5s both ease-in;
-moz-animation:scaleUp 0.5s both ease-in;
animation:scaleUp 0.5s both ease-in;    
}

/* about ------------------------ */
.page-about.ng-leave        {
    -webkit-animation:slideOutLeft 0.5s both ease-in;
-moz-animation:slideOutLeft 0.5s both ease-in;
animation:slideOutLeft 0.5s both ease-in;   
}
.page-about.ng-enter {  
    -webkit-animation:slideInRight 0.5s both ease-in;
-moz-animation:slideInRight 0.5s both ease-in;
animation:slideInRight 0.5s both ease-in;    
}

/* contact ---------------------- */
.page-contact.ng-leave      {
    -webkit-transform-origin: 50% 50%;
-webkit-animation: rotateOutNewspaper .5s both ease-in;
-moz-transform-origin: 50% 50%;
-moz-animation: rotateOutNewspaper .5s both ease-in;
transform-origin: 50% 50%;
animation: rotateOutNewspaper .5s both ease-in;
}
.page-contact.ng-enter { 
    -webkit-animation:slideInUp 0.5s both ease-in;
-moz-animation:slideInUp 0.5s both ease-in;
animation:slideInUp 0.5s both ease-in;  
}

/* rotate and fall */
@-webkit-keyframes rotateFall {
0% { -webkit-transform: rotateZ(0deg); }
20% { -webkit-transform: rotateZ(10deg); -webkit-animation-timing-function: ease-out; }
40% { -webkit-transform: rotateZ(17deg); }
60% { -webkit-transform: rotateZ(16deg); }
100% { -webkit-transform: translateY(100%) rotateZ(17deg); }
}
@-moz-keyframes rotateFall {
0% { -moz-transform: rotateZ(0deg); }
20% { -moz-transform: rotateZ(10deg); -moz-animation-timing-function: ease-out; }
40% { -moz-transform: rotateZ(17deg); }
60% { -moz-transform: rotateZ(16deg); }
100% { -moz-transform: translateY(100%) rotateZ(17deg); }
}
@keyframes rotateFall {
0% { transform: rotateZ(0deg); }
20% { transform: rotateZ(10deg); animation-timing-function: ease-out; }
40% { transform: rotateZ(17deg); }
60% { transform: rotateZ(16deg); }
100% { transform: translateY(100%) rotateZ(17deg); }
}

/* scale up */
@keyframes scaleUp {
from { opacity: 0.3; transform: scale(0.8); }
}
@-moz-keyframes scaleUp {
from { opacity: 0.3; -moz-transform: scale(0.8); }
}
@-webkit-keyframes scaleUp {
from { opacity: 0.3; -webkit-transform: scale(0.8); }
}

/* slide in from the right */
@keyframes slideInRight {
from { transform:translateX(100%); }
to { transform: translateX(0); }
}
@-moz-keyframes slideInRight {
from { -moz-transform:translateX(100%); }
to { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
from { -webkit-transform:translateX(100%); }
to { -webkit-transform: translateX(0); }
}

/* slide in from the bottom */
@keyframes slideInUp {
from { transform:translateY(100%); }
to { transform: translateY(0); }
}
@-moz-keyframes slideInUp {
from { -moz-transform:translateY(100%); }
to { -moz-transform: translateY(0); }
}
@-webkit-keyframes slideInUp {
from { -webkit-transform:translateY(100%); }
to { -webkit-transform: translateY(0); }
}

/* slide in from the bottom */
@keyframes slideOutLeft {
to { transform: translateX(-100%); }
}
@-moz-keyframes slideOutLeft {
to { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes slideOutLeft {
to { -webkit-transform: translateX(-100%); }
}

/* rotate out newspaper */
@-webkit-keyframes rotateOutNewspaper {
to { -webkit-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@-moz-keyframes rotateOutNewspaper {
to { -moz-transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}
@keyframes rotateOutNewspaper {
to { transform: translateZ(-3000px) rotateZ(360deg); opacity: 0; }
}

Comentarios

Publicar un comentario

Entradas populares de este blog

Android - Basic Steps (Service)

Service Run in the main thread of the hosting application Android can kill the Service if need the resources Purpose Supporting inter-application method execution Performing background processing Start a Service Call Context.startService(Intent intent)\ To call from a Fragment use getActivity().getApplicationContext().startService( intentService); Executing the service After call startService(...)  In the Service is executed the method onStartCommand(...) If the method returns the constant START_NOT_STICKY then Android will not restart the service automatically if the the process is killedp Foreground To execute the service foreground call the method startForeground() Use this if the user is aware of the process Bind to a Service Call the method Context.bindService( Intent service ServiceConnection con int flags ) Send Toast from the Service On the method onStartCommand receive the message   ...
Publicar un comentario
Leer más

BI - SSIS ( Basics I )

SSIS - Basic Concepts Tasks Bulk Insert Task—Loads data into a table by using the BULK INSERT SQL command. Data Flow Task—This is the most important task that loads and transforms data into an OLE DB Destination. Execute Package Task—Enables you to execute a package from within a package, making your SSIS packages modular. Execute Process Task—Executes a program external to your package, like one to split your extract file into many files before processing the individual files. Execute SQL Task—Executes a SQL statement or stored procedure. File System Task—This task can handle directory operations like creating, renaming, or deleting a directory. It can also manage file operations like moving, copying, or deleting files. FTP Task—Sends or receives files from an FTP site. Script Task—Runs a set of VB.NET or C# coding inside a Visual Studio environment. Send Mail Task—Sends a mail message through SMTP. Analysis Services Processing Task—This task processes a SQL Server A...
Publicar un comentario
Leer más

TOGAF9

Kinds of Architectures Business Architecture / Business Process Architecture    Define the business strategy, governance, organization and key business processes Data Architecture    Describe the structure of an organization logical and physical data assets and data resources Application Architecture    Describe a blueprint for the individual application systems to be deploy, interactions and  their relationships to the core business processes of the organization Technology Architecture    Describe the logical software and hardware capabilities that are required to support the deployment of business data and application services. This includes middle-ware infrastructure, networks, communications, processing standards  Architecture Governance Increase transparency of accountability, and informed delegation of authority Controlled risk management Protection of the existing asset base through maximizing  re-us...
Publicar un comentario
Leer más