ng-if = 'false' is hiding the DIV

Question

I have the ng-click and ng-if directives on the same div.

Since the click variable is initially set to false the box DIV does not appear. If I set click to true or use !click for ng-if directive, then the box DIV appears but still no animation occurse upon clicking.

If I remove the ng-click from box DIV and add it to another DIV or button to do the toggle, animation works. However, the box DIV is still hidden initially and also disappears after the animation run.

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

Demo https://jsfiddle.net/ae8kwzxg/93/

Answer 1

This line is do nothing: "ng-click="click=!click".

The reason why is not work is because your $scope.click variable is primitive type (bool). It means in this line: ng-click="click=!click" click variable is a copy of your $scope.click variable and you just change the copy but not the actual $scope.click. If you will change your $scope.click variable to object, for example $scope.click = {active:true} and change your HTML to: <div ng-click="click.active=!click.active" ng-if="click.active" class="box"></div> It will work.

But better way is always do assignments in function:

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

  <div ng-click="clicked()" ng-if="click" class="box"></div>

</div>

And your controller will be:

angular.module('animationApp', ['ngAnimate'])

    .controller('c1', function ($scope, $animate, $timeout) {

        $scope.click = true;

        $scope.clicked = function(){
            $scope.click = !$scope.click;
        }
})

This is working example: https://jsfiddle.net/ae8kwzxg/94/