ngAnimate - 源模板和目标模板在动画时都可见

Question

我尝试使用 ngAnimate 创建一个简单的淡入淡出动画。动画看起来不错，只是视图的容器在动画时包含源模板和目标模板。

如何只显示活动模板？

<html ng-app="testApp" lang="en">
    <head>
        <script src="https://code.angularjs.org/1.3.15/angular.min.js"></script>
        <script src="https://code.angularjs.org/1.3.15/angular-route.js"></script>
        <script src="https://code.angularjs.org/1.3.15/angular-animate.min.js"></script>

        <script type="text/ng-template" id="/page1.html">page1 content</script>
        <script type="text/ng-template" id="/page2.html">page2 content</script>
        <script>
            var app = angular.module('testApp', ['ngRoute','ngAnimate']);
            app.config(function($routeProvider) {
                $routeProvider.when('/page1', {templateUrl: '/page1.html'});
                $routeProvider.when('/page2', {templateUrl: '/page2.html'});
            });
        </script>

        <style>
            #container {border: 1px solid black;}   /**the container has double height while animation*/

            #content {-webkit-transition: opacity .2s linear;}  
            #content.ng-enter {opacity:0;}
            #content.ng-enter.ng-enter-active {opacity:0;}
            #content.ng-leave {opacity:1;}
            #content.ng-leave.ng-leave-active {opacity:0;}
        </style>
    </head>
    <body>
        <div id="container">
            <div id="content" ng-view></div>
        </div>
    </body>
</html>

Answer 1

有多种解决方案：

用离开动画的持续时间延迟进入动画 (transition-delay)
删除进入或离开动画
使用 #content{position: absolute} 或 #content + #content {margin-top: -$height px} 以便 parent 的高度不受影响。

ngAnimate - 源模板和目标模板在动画时都可见

ngAnimate - both source and target template are visible while animation

animation

angularjs

ng-view

ngroute