Я пытаюсь создать простую анимацию постепенного появления и исчезновения, используя 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>
