角度动画滑动面板 - 加载视图时显示第二个答案

【问题标题】：angular animated sliding panel - shows for second when view loaded角度动画滑动面板 - 加载视图时显示第二个
【发布时间】：2014-09-15 17:58:45
【问题描述】：

我正在尝试构建动画垂直面板，假设它是隐藏的

当用户点击按钮时，面板应该从右侧滑动。这是我的代码：

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

问题：

加载时滑动面板可见一秒然后隐藏

(demonstration)

将不胜感激任何建议

【问题讨论】：

标签： angularjs css animation

【解决方案1】：

您可以使用jQuery 的slideUp 或尝试自定义Angular 指令，如AngularSlideables。但是你也可以使用直接的 CSS 和 Angular 的 ngAnimate 模块，如下所示：

.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;
}

然后简单地定义你的面板：

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

在您的具体情况下，您可能会使用 CSS 的 animate 而不是我上面使用的 transition。

【讨论】：