ng if='false'隐藏DIV

我有 ng-click ng-if

自 click 变量最初设置为 false 这个 DIV未出现。如果我设置 点击 到 true !click 对于 ng if 盒

如果我删除 ng点击 从…起 DIV并将其添加到另一个DIV或按钮以进行切换,动画工作。然而 盒 DIV最初仍然隐藏,并且在动画运行后也会消失。

<div ng-app="animationApp" ng-controller="c1">

  <div ng-click="click=!click" ng-if="click" class="box"></div>

</div>

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/