1

我有一个 Angular JS 指令，它由控制器通过事件侦听器服务更新。在链接方法中，我测量了通过 CSS 过渡设置动画的高度元素。当我这样做时，它会跳过动画。如果我在整个脚本中放置断点，它似乎永远不会将隐藏类应用于元素。

HTML：

<div class="current-post" my-current-post="" ng-show="getCurrentPost(this)" ng-animate=" 'post' ">
    <div class="current-post-actions">
        <ul class="unstyled">
            <li><img src="{{ URL::asset('img/profile.jpeg') }}" class="img-circle"></li>
        </ul>
        <div class="current-post-content">
            <div class="date">
                <span="day">[[currentPost.display_date | date:'MMMM d, yyyy']]</span>
                <span class="time">[[currentPost.display_date | date:'H:mm a']]</span>
            </div>
            <h2>[[currentPost.title]]</h2>                      
            <div ng-bind-html-unsafe="currentPost.body"></div>
            <div class="slideshow">
                <slide ng-repeat="asset in post.assets" url="[[asset.url]]" type="[[asset.asset_type.name]]" details="asset.details"></slide>
            </div>
        </div>
    </div>      
</div>

JS

app.directive('myCurrentPost', function(postService) {
return {
    link: function(scope, element, attrs) {

        scope.$on('newCurrentPost', function() {
            el = angular.element(postService.currentSummary);
            offset = el.offset().top;

            windowHeight = angular.element(window).height();

            // The offender
            elementHeight = element.height();

            if (offset < 20) {
                offset = 50;
            }

            element.css('top', offset);

            // console.log(postService.currentSummary.html());
        });         
    }
};
});

少/CSS

.post-enter,
.post-show {
  .transition(all cubic-bezier(0.25, 0.46, 0.45, 0.94) 2s);   
  opacity: 0;
  left:-500px;
}

.post-enter.post-enter-active,
.post-show.post-show-active {
  opacity: 1;
  left:0;
}

.post-hide {
  opacity: 0;
  left:-500px;
}

.post-hide,
.post-hide.post-hide-active {
  opacity: 0;
  left:-500px;
}
4

0 回答 0