Question

我正在使用Angular版本v1.2.20并且在使用ng-show / hide时遇到了关于css转换的一些奇怪现象。出于某种原因，如果通过ng-click调用函数来更改范围对象的值，则动画可以正常工作，但如果我通过其他方法更改它，请说出超时，或者甚至只是在init中调用它函数，元素显示，但没有动画发生。这是一个小例子函数，在从ng-click调用时动画，但不是。

showFlash: (msg, type = "success") ->
  @$.flash =
    "message": msg
    "type": type
  @$timeout =>
    @$.hideFlash()
  , 3000

hideFlash: ->
  @$.flash = null

P.S - 如果你想知道有趣的@$语法，我正在使用Angular Classy作为我的控制器。

CSS（Scss）

.dashboard-flash-message {
  @include transition ( all 300ms ease-in-out );
  @include transform( translateY(0) );
  background: $primary;
  color: #fff;
  font-size: 0.75rem;
  font-weight: bold;
  opacity: 1;
  padding: 20px;
  position: absolute; bottom: 0; left: 0;
  width: $dashboard-sidebar-width;

  &.ng-hide {
    @include transform( translateY(100%) );
    opacity: 0;
  }
}

Answer 1

Angular使用4个类来为ng-show / ng-hide设置动画：

.ng隐藏加
  .ng隐藏加活性
  .ng隐藏，删除
  .ng隐藏-除去活性

我没有看到您在样式表中使用它们。

<强> CSS

.ng-hide-add {
    -webkit-transition:0.5s linear all;
    -moz-transition:0.5s linear all;
    -o-transition:0.5s linear all;
    transition:0.5s linear all;
    opacity: 1;
}
.ng-hide-add.ng-hide-add-active { 
    opacity: 0;
}

.ng-hide-remove {
   -webkit-transition:0.5s linear all;
   -moz-transition:0.5s linear all;
   -o-transition:0.5s linear all;
   transition:0.5s linear all;
    opacity: 0;
}
.ng-hide-remove.ng-hide-remove-active { 
    opacity: 1;
}

<强>脚本

var app = angular.module("app", ['ngAnimate']);
app.controller('Ctrl', function($scope, $timeout) {
     $scope.show = false;
     $scope.onShow = function() { 
        $scope.show = true;
        $timeout(function() { 
           hideMe();
        },2000);
     }
     function hideMe() {
        $scope.show = false;
     }
});

这是Plunker，演示了如何使用它们。

Angular - ng显示/隐藏动画仅在ng-click时触发？

1 个答案: