選項卡上的AngularJS動畫1.4.7

Question

我目前在為一組標簽設置動畫方面遇到問題。 我創建了一個反映我的代碼的Plunker，它也有同樣的問題。 似乎選項卡內容之外的所有內容都可以制作動畫，但是當您按下每個選項卡時，動畫將不起作用。 每個選項卡的內容應淡入。正確方向的任何點都將有所幫助。 這是Plunker： http ://plnkr.co/edit/ZjrG8uHS4sHq3pxgGVVLu?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可以在過渡期間阻止兩個選項卡的內容彼此堆疊，我認為這是您想要的。 為了使它平滑，您需要在過渡期間使接片主體的寬度保持恆定，但這應該可以解決您的主要問題。