Угловая анимированная скользящая панель - отображается на секунду при загрузке представления ⇐ CSS

[Anonymous]

Я пытаюсь создать анимированную вертикальную панель, которая должна быть скрыта

и когда пользователь нажимает кнопку, панель должна скользить справа.
здесь это мой код:

HTML:

Код: Выделить всё

slide:{{slide}}


click to toggle panel

CSS:

Код: Выделить всё

    body{
background-color:#FFF;
height:100%;
width:100%;
margin:0;
color:#FFF;
font-size:3em;
line-height:100px;
text-align:center;
overflow:hidden;
}

.animate-slide {
background:#30373f;
position:absolute;
width: 320px;
height:100%;
top: 0;
right:0px;
}

.animate-slide.ng-hide-add,
.animate-slide.ng-hide-remove {
display:none;
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
}

.animate-slide.ng-hide-remove.ng-hide-remove-active {
-webkit-animation:0.5s slide-left;
animation:0.5s slide-left;
}

.animate-slide.ng-hide-add.ng-hide-add-active {
-webkit-animation:0.5s slide-right;
animation:0.5s slide-right;
}

.animate-slide.ng-hide {
right:-320px;
display:none;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes slide-left
{
0%   {right:-320px;}
100%  {right:0;}
}

/* Standard syntax */
@keyframes slide-left
{
0%   {right:-320px;}
100%  {right:0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes slide-right
{
0%  {right:0;}
100%   {right:-320px;}
}
/* Standard syntax */
@keyframes slide-right
{
0%  {right:0;}
100%   {right:-320px;}
}

JS:

Код: Выделить всё

 angular.module("app",["ngAnimate"])
.controller("Ctrll",function($scope, $timeout){
$scope.showAlerts  = function($event) {

$timeout(function(){
$scope.$broadcast('openAlerts');
},1)
}
})
.controller('alertsCtrl', function ($scope) {
$scope.$on('openAlerts', function(event, args) {
$scope.slide = !$scope.slide;
});
})
.directive('alertsCenter', function () {
return {
templateUrl: 'alerts.html',
replace:true,
restrict: 'E',
controller:'alertsCtrl'
};
});

Проблема:

при загрузке выдвижная панель видна на секунду, а затем скрывается

(демонстрация)

Буду признателен за любой совет

Подробнее здесь: https://stackoverflow.com/questions/249 ... iew-loaded