问为什么我添加的` `class`‘`.display_none`’的‘the’不被隐藏？
EN

Stack Overflow用户

提问于 2016-10-12 04:29:14

回答 1查看 63关注 0票数 0

我想把浅灰div设置为小，红色div设置为大，1秒后，小div是隐藏的。

这是我的密码：

   <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>

现在，如果我单击div，div的大小将会改变，1秒后我需要隐藏较小的div。问题是小div是不隐藏的。

css

angularjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-10-12 04:42:57

使用$timeout

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

为什么不工作？

您正在立即调用$interval.cancel，这将导致任务的取消。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/39990547

复制

相似问题

问为什么我添加的` `class`‘`.display_none`’的‘the’不被隐藏？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我添加的` `class`‘`.display_none`’的‘the’不被隐藏？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么我添加的` `class`‘`.display_none`’的‘the’不被隐藏？
EN