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

Android - Basic Steps (Location & Maps)

Location Is composed by Latitude Longitude Time-stamp Accuracy Altitude Speed Bearing LocationProvider Types: Network  Wifi access points Cell phone towers GPS Passive Piggyback on the readings requested by other application Permissions Network  android.permission.ACCESS_COARSE_LOCATION android.permission.ACCESS_FINE_LOCATION GPS android.permission.ACCESS_FINE_LOCATION Passive Provider android.permission.ACCESS_FINE_LOCATION LocationManager System service for accessing location data getSystemService( Context.LOCATION_SERVICE ) Functions Determine the last known user location Register for location update Register to receive intents when the device nears or move away from a given geographic area LocationListener Defines callbacks methods that are called when Location or LocationProvider status change. Methods onLocationChanged(...) onProviderDisabled(...) onProviderEnabled(...) onStatusChan...
Publicar un comentario
Leer más

IIS - Permisions

IIS Permissions To enable the Active Directory connection in the IIS, follow the next steps: Go to IIS Go to Application Pool Select your App Pool Select Advanced Settings in the right side In the section Process Model Select in Identity value the property " NetworkService " You don´t need to restart your application
Publicar un comentario
Leer más