ng-if = 'false'隐藏了 DIV

Question

我在同一div。

上具有ng-click和ng-if指令

由于click变量最初设置为false box div不会出现。如果我将click设置为true或将!click用于ng-if指令，则出现 box DIV出现，但单击时仍然没有动画。

如果我从 box div中删除ng-click，然后将其添加到另一个Div或按钮以进行切换，则动画起作用。但是， box DIV最初仍然隐藏，并且在动画运行后也会消失。

html

<div ng-app="animationApp" ng-controller="c1">
  <div ng-click="click=!click" ng-if="click" class="box"></div>
</div>

JS

angular.module('animationApp', ['ngAnimate'])
    .controller('c1', function ($scope, $animate, $timeout) {
        $scope.click = false;
})
;

CSS

.box {
  width: 40px;
  height: 40px;
  background-color: indianred;
}
.box.ng-enter {
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  transform: rotateZ(0deg);
}
.box.ng-enter-active {
  transform: rotateZ(-180deg);
}
.box.ng-leave {
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  transform: rotateZ(-180deg);
}
.box.ng-leave-active {
  transform: rotateZ(0deg);
}

演示https://jsfiddle.net/ae8kwzxg/93/

Answer 1

此行无需做："ng-click="click=!click"。

不工作的原因是因为您的$scope.click变量是原始类型（BOOL）。这意味着在此行中：ng-click="click=!click"单击变量是$scope.click变量的副本，您只需更改副本，而不是实际的$scope.click。如果您将$scope.click变量更改为对象，例如$scope.click = {active:true}并将您的HTML更改为：<div ng-click="click.active=!click.active" ng-if="click.active" class="box"></div>它将起作用。

，但更好的方法总是在功能中进行分配：

<div ng-app="animationApp" ng-controller="c1">
  <div ng-click="clicked()" ng-if="click" class="box"></div>
</div>

，您的控制器将是：

angular.module('animationApp', ['ngAnimate'])
    .controller('c1', function ($scope, $animate, $timeout) {
        $scope.click = true;
        $scope.clicked = function(){
            $scope.click = !$scope.click;
        }
})

这是有效的示例：https：//jsfiddle.net/ae8kwzxg/94/