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}，以便不影响父级的高度。

ngAnimate - 动画时可以看到源模板和目标模板

1 个答案: