CODEWITHSUNDEEP
cssangularjs
jiexishede
jiexishede

Reputation: 2613

Why the `div` which I add the `class` `.display_none` is not hide？

I want to set the light gray div to small and the red div to big, and 1 second after, the small div is hidden.

This is my code: 

   <style>

        div {
            margin: 50px auto;
            width: 50px;
            height: 50px;
            background-color: lightblue;
        }
        .base-class {
            transition:all cubic-bezier(0.250, 0.001, 0.990, 0.990) 1s;
        }
        .content-love {
            display: block;
            width: 16px;
            height: 14px;
            float: right;
            margin-top: 10px;
            margin-right: 6px;
            background-color: red;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
        }

        .content-like {
            display: block;
            width: 16px;
            height: 14px;
            float: right;
            margin-top: 10px;
            margin-right: 6px;
            background-color: lightgray;
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
        }
        .animate_display {
            width: 116px;
            height: 114px;
        }

        div.display_none {
            display: none;
        }

    </style>
    <script src="angular.js"></script>

<body ng-app="app" ng-controller="xxx">

<div  class="content-love base-class" ng-click="likeFun($index)"  ng-class="{animate_display:liked,display_none:!displayHH}" > </div>

<div class="content-like base-class" ng-click="likeFun($index)" ng-class="{animate_display:!liked,display_none:displayHH}" > </div>

</body>

<script>
     var app  = angular.module('app',[]);
    var controller1 = app.controller('xxx',['$scope', function ($scope) {
        $scope.liked = false;
        $scope.displayHH = false;
        $scope.likeFun = function (index) {
            $scope.liked = !$scope.liked;
            $scope.displayNoneFun();
        }
        $scope.displayNoneFun = function () {
            var timer = $interval(function () {
                $scope.displayHH = !$scope.displayHH;
            },1000);
            $interval.cancel(timer);
        }

    }]);
</script>

Now, if I click the div, the size of div will change, and 1 second later I need to hide the smaller div. The problem is the small div is not hidden.

Upvotes: 0

Views: 63

Answers (1)

RIYAJ KHAN
RIYAJ KHAN

Reputation: 15292

Use $timeout

$timeout(function () {
                $scope.displayHH = !$scope.displayHH;
            },1000);

Why not working ?

You are calling $interval.cancel immediately,which causing cancellation of task.

Upvotes: 1

Related Questions