Я новичок в angularjs и пытаюсь узнать, как работает фреймворк.Здесь моя проблема.Я написал скрипт, чтобы кнопка показывала и скрывала сообщение.В то же время я пытался включить анимацию во время отображения сообщения.К сожалению, я могу сделать один из них.Пока я комбинирую оба в сценарии, я не знаю, почему мне нужно убрать кнопку «скрыть», чтобы анимация заработала.
Вот мой сценарий.
test.html:
<!-- 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:
/* test.js */
angular.module('test', ['ngAnimate'])
.controller('testController', function() {
var doc = this;
doc.div_show = false;
});