标签上的 Angularjs 动画 1.4.7

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 会阻止两个选项卡内容在过渡期间相互堆叠，我认为这就是您想要的。为了保持流畅，您需要在过渡期间保持标签正文宽度不变，但这应该可以解决您的主要问题。