Within this JSFiddle, there is a demonstration of a block that slides in from the left after a delay of two seconds.
(function (angular) {
'use strict';
angular.module('testApp', [])
.controller('TestCtrl', function ($scope, $timeout) {
$scope.title = "Hello";
$scope.show = false;
$timeout(function () {
$scope.show = true;
}, 2000);
});
})(angular);
The objective is to have the block slide in as soon as the view loads, becoming visible to the user.
An existing CSS style can be utilized to achieve the sliding effect on the block.
.left-inner-nav {
position:absolute;
top:0;
/*left:75px;*/
left: -150px;
width: 150px;
bottom: 0;
background:#2792D9;
-webkit-transition: left 2s ease;
-moz-transition: left 2s ease;
-ms-transition: left 2s ease;
-o-transition: left 2s ease;
transition: left 2s ease;
}
.left-inner-nav-animate {
left: 0;
}
Implementing this slide-in animation upon view load is the current challenge.