'angular animated sliding panel - shows for second when view loaded

i'm trying to build animated vertical panel which suppose to be hidden

and when user clicks button -panel should slide from the right. here is my code:

HTML :

<body ng-controller="Ctrll">
    <p style="color:#000;margin:0"><span>slide:</span>{{slide}} </p>


    <button ng-click="showAlerts()" style="float:left">
      click to toggle panel
    </button>
    <!--sliding panel directive-->
    <alerts-center></alerts-center>


    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="js/index.js"></script>
</body>

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'
    };
});

The problem:

when loading the sliding panel is visible for a second and then hides

(demonstration)

Will appreciate any advise



Solution 1:[1]

You can use jQuery's slideUp or try a custom Angular directive like AngularSlideables. But you can also use straight CSS with Angular's ngAnimate module as follows:

.panelAnimate {
    transition: all 5s linear;
    -moz-transition: all 5s linear; /* Firefox 4 */
    -webkit-transition: all 5s linear; /* Safari and Chrome */
    -o-transition: all 5s linear; /* Opera */
    -ms-transition: all 5s linear; /* Explorer 10 */
}
.panelAnimate.ng-hide {
    opacity: 0;
}

Then simply define your panel:

<div class="panel panel-primary panelAnimate">...</div>

In your specific case, you would likely use CSS's animate rather than the transition I used above.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Nicholas Blasgen