我是angularjs的新手，正在尝试学习框架的工作原理。这是我的问题。 我编写了一个脚本，让按钮显示和隐藏消息。同时，当显示该消息时，我尝试制作动画。 不幸的是，我可以做其中之一。只要将两者结合在一起，我就不知道为什么必须删除“隐藏”按钮才能获得动画效果。
这是我的剧本。
<!-- test.html -->
<!DOCTYPE html>
<html ng-app='test'>
<head>
<title>test angular animation</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-animate.js"></script>
<script src="test.js"></script>
<style>
div.ng-enter {
transition: 2s linear all;
opacity: 0;
}
div.ng-enter.ng-enter-active {
opacity: 1;
}
</style>
</head>
<body ng-controller="testController as doc">
<!-- TO MAKE THE ANIMATION WORK, THE FOLLOWING HIDE BUTTON HAVE TO BE COMMENTED, PLEASE HELP -->
<button ng-if="doc.div_show" ng-click="doc.div_show=false">hide</button>
<button ng-if="!doc.div_show" ng-click="doc.div_show=true">show</button>
<div ng-if="doc.div_show">Hello World</div>
</body>
</html>
/* test.js */
angular.module('test', ['ngAnimate'])
.controller('testController', function() {
var doc = this;
doc.div_show = false;
});
答案 0 :(得分：0)
按docs所示更改样式，如下所示：
<style>
/* The starting CSS styles for the enter animation */
.fade.ng-enter {
transition:0.5s linear all;
opacity:0;
}
/* The finishing CSS styles for the enter animation */
.fade.ng-enter.ng-enter-active {
opacity:1;
}
</style>
向您的div添加一个淡入淡出的类：
<div ng-if="doc.div_show" class="fade">Hello World</div>