Question

我目前在设置一组标签动画时遇到问题。我创建了一个反映我的代码的Plunker，它也有同样的问题。似乎选项卡内容之外的所有内容都可以正常运行，但是当您按下每个选项卡时，动画都无法正常工作。每个标签的内容都应该淡入。正确方向上的任何一点都会有所帮助。这是Plunker：http://plnkr.co/edit/ZjrG8uHS4sHq3pxgGVLu?p=preview

app.js

var app = angular.module('plunker', ['ngAnimate']);

app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
})
.directive('tab', function () {
    return {
        restrict: 'E',
        transclude: true,
        template: '<div role="tabpanel" ng-show="active" ng-transclude  class="smooth_transition"></div>',
        require: '^tabset',
        scope: {
            heading: '@'
        },
        link: function (scope, elem, attr, tabsetCtrl) {
            scope.active = false;
            tabsetCtrl.addTab(scope)
        }
    }
})
.directive('tabset', function () {
    return {
        restrict: 'E',
        transclude: true,
        scope: {},
        templateUrl: 'tabset.html',
        bindToController: true,
        controllerAs: 'tabset',
        controller: [ function () {
            var self = this;
            self.tabs = [];
            self.addTab = function addTab(tab) {
                self.tabs.push(tab);

                if (self.tabs.length === 1) {
                    tab.active = true;
                }
            };
            self.select = function (selectedTab) {
                angular.forEach(self.tabs, function (tab) {
                    if (tab.active && tab !== selectedTab) {
                        tab.active = false;
                    }
                });
                selectedTab.active = true;
            };
        }]
    };

});

的style.css

.nav-tabs{
}

.tab-body{
    background: #acacac;
}
.nav-tabs .active{
    background:#494949;
}
.nav-tabs>li {
    background: #acacac;
}

.smooth_transition.ng-enter{
    transition:1s linear all;
    -webkit-transition : 1s linear all;
    opacity:0;
}

.smooth_transition.ng-enter.ng-enter-active {
    opacity:1;
}
.smooth_transistion.ng-leave {
    opacity:1;
}
.smooth_transistion.ng-leave.ng-leave-active {
    opacity:1;
}

tabset.html

<div role="tabpanel" class="smooth_transition">
    <ul class="nav nav-tabs" role="tablist" class="smooth_transition">
        <li role="presentation"
            ng-repeat="tab in tabset.tabs" class="smooth_transition">
            <a href=""
               role="tab"
               ng-click="tabset.select(tab)">{{tab.heading}}</a>
        </li>
    </ul>
    <ng-transclude>
    </ng-transclude>
</div>

Answer 1

您使用ng-enter和ng-leave代替，就像下面的复选框示例一样，您应该使用ng-hide。当您更改标签时，会显示或隐藏标签正文，这里有一个标题：http://plnkr.co/edit/A2bAxWZYlinu27j5jo0J?p=preview

代码只是将css更改为：

.smooth_transition.ng-hide{
    opacity:0;
}

.smooth_transition.ng-hide-add, .smooth_transition.ng-hide-remove {
  transition: all linear 0.5s;
   position: absolute;
}

使用position：absolute会阻止两个制表符内容在转换过程中堆叠在彼此的顶部，我认为这是你想要的。为了保持平滑，您希望在过渡期间保持标签主体宽度不变，但这应该可以解决您的主要问题。

Angularjs在标签上动画1.4.7

1 个答案: