LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


  
  

By ShMcK

CSS
button {
  padding: 10px;
  margin: 5px;
}

#view { 
  width:auto;
}

// Slide-in
#view.slide-in.ng-enter,
#view.slide-in.ng-leave      { position:absolute; left:30px; right:30px;
    transition:0.5s all ease; -moz-transition:0.5s all ease; -webkit-transition:0.5s all ease; 
}
    
#view.slide-in.ng-enter            { 
    -webkit-animation:slideInRight 0.5s both ease;
	-moz-animation:slideInRight 0.5s both ease;
	animation:slideInRight 0.5s both ease; 
}

#view.slide-in.ng-leave            { 
    -webkit-animation:slideOutLeft 0.5s both ease;
	-moz-animation:slideOutLeft 0.5s both ease;
	animation:slideOutLeft 0.5s both ease;   
}

@keyframes slideOutLeft {
	to 		{ transform: translateX(-200%); }
}
@-moz-keyframes slideOutLeft {	
	to 		{ -moz-transform: translateX(-200%); }
}
@-webkit-keyframes slideOutLeft {
	to 		{ -webkit-transform: translateX(-200%); }
}

@keyframes slideInRight {
	from 	{ transform:translateX(200%); }
	to 		{ transform: translateX(0); }
}
@-moz-keyframes slideInRight {
	from 	{ -moz-transform:translateX(200%); }
	to 		{ -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
	from 	{ -webkit-transform:translateX(200%); }
	to 		{ -webkit-transform: translateX(0); }
}

// Fade-in
#view.fade-in {
  transition: 2s linear all;
  -webkit-transition: 2s linear all;
}
#view.fade-in.ng-enter {
  opacity: 0;
  transition: 2s linear;
}
#view.fade-in.ng-enter.ng-enter-active {
  opacity: 1;
}
#view.fade-in.ng-leave {
  opacity: 1;
}
#view.fade-in.ng-leave.ng-leave-active {
  opacity: 0;
}

// Scale
#view.scale {
  transition: 2s linear all;
  -webkit-transition: 2s linear all;
}
#view.scale.ng-enter,
#view.scale.ng-leave {
    transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}
#view.scale.ng-enter.ng-enter-active,
#view.scale.ng-leave {
   transform: scaleY(1);
    height: 30px;
    opacity: 1;
}
#view.scale.ng-leave.ng-leave-active,
#view.scale.ng-enter {
  transform: scaleY(0);
  height: 0px;
    opacity: 0;
}

h4 {
  position: absolute;
  bottom: 0;
}
JS
angular.module('transitions', ['ngAnimate', 'ui.router'])

.controller('tCtrl', function ($state, $scope) {
  
  // transitions
  this.tabs = ['fade-in', 'slide-in', 'scale'];
  
  // backgrounds
  var colorList = ['red', 'green', 'blue', 'white', 'gray'],
    listLast = colorList.length;
  
  // on button click
  this.stateChange = function (tab) {
    this.transition = tab;
    this.bg = colorList[(Math.floor(Math.random()*listLast))];
    $state.go(tab);
    
  };
  
})

.config(function($stateProvider, $urlRouterProvider) {
  var template = "

Transitions in AngularJS

"; $urlRouterProvider.otherwise('/fade-in'); $stateProvider .state('fade-in', { url: '/fade-in', template: template, data: { transition: 'fade-in'} }) .state('slide-in', { template: template, data: { transition:'slide-in'} }) .state('scale', { template: template, data: { transition: 'scale'} }); });
Host Instantly Drag and Drop Website Builder

 

Description

Practice with basic CSS3 transitions using angular-animate.
Term
Mon, 11/27/2017 - 22:06

Related Codes

Pen ID
Pen ID
Pen ID