0

所需的行为是单击图像，并<div>在 1 秒内轻松达到全高度。再次单击图像时，我需要<div>在 1 秒内恢复到隐藏状态。

现在会发生什么：

  • 单击图像会<div>立即显示，没有过渡。
  • 再次单击会在两秒钟后<div>隐藏。隐藏时没有过渡。

我的指令的 JS：

.directive('gigDetails', ['$animator', 函数工厂($animator) {
    返回 {
        限制：'A'，
        templateUrl: 'partials/gigdetails.html',
        替换：假，
        嵌入：假，

        范围： {
            gigId：'@'
        },

        控制器：功能（$范围）{
            $scope.expandedObjectTracker = {};
        },

        编译：函数（tElement，tAttrs）{
            tElement.hide();

            返回函数链接（范围、元素、属性）{
                var animator = $animator(范围, attrs);
                var gigId = scope.gigId;

                var startGigAction = 函数 () {
                    var expandObject = scope.expandedObjectTracker;
                    如果（！expandedObject.openNow）{
                        // 没有打开，打开它！
                        animator.show（元素）；
                        扩展对象.openNow = true;
                    } 别的 {
                        animator.hide（元素）；
                        扩展对象.openNow = false;
                    }
                };

                element.prev('.gridThumb').on('click', startGigAction);
            }
        },
    };
}]);

在 HTML 中调用它：

<li ng-repeat="gig in gigs">
    <img ng-src="{{ homeURL + '/' + gig.imgURL }}" class="gridThumb" id="{{ 'gigThumb' + gig.gigId }}">
    <div 
        class="gigDetailsContainer" 
        gig-details 
        gig-id="{{ gig.gigId }}" 
        ng-animate="'gig-container'"
    >
    </div>
</li>

CSS定义：

/* 角度转换 */
.gig-container-show, .gig-container-hide {
    -webkit-transition:height 1s 轻松；
    -moz-transition:height 1s 缓解；
    -o-transition:height 1s 缓解；
    过渡：高度 1s 缓和；
}

我究竟做错了什么？

4

0 回答 0