title: angular animated sliding panel - shows for second when view loaded
body: <p>i'm trying to build animated vertical panel which suppose to be hidden </p>
  
  <p>and when user clicks button -panel should slide from the right.
  here is my code:</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;body ng-controller="Ctrll"&gt;
      &lt;p style="color:#000;margin:0"&gt;&lt;span&gt;slide:&lt;/span&gt;{{slide}} &lt;/p&gt;
  
  
      &lt;button ng-click="showAlerts()" style="float:left"&gt;
        click to toggle panel
      &lt;/button&gt;
      &lt;!--sliding panel directive--&gt;
      &lt;alerts-center&gt;&lt;/alerts-center&gt;
  
  
      &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-animate/angular-animate.js"&gt;&lt;/script&gt;
      &lt;script src="js/index.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    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;}
      }
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code> 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'
      };
  });
  </code></pre>
  
  <p>The problem:</p>
  
  <p>when loading the sliding panel is visible for a second and then hides</p>
  
  <p>(<a href="http://plnkr.co/edit/pm1yPw?p=preview" rel="nofollow">demonstration</a>)</p>
  
  <p>Will appreciate any advise</p>