Javascript 带切换按钮的角度动画

我是angularjs的新手，正在努力学习该框架是如何工作的。这是我的问题。 我写了一个脚本，用一个按钮显示和隐藏消息。同时，当信息显示时，我尝试表演动画。 不幸的是，我可以做其中一个。只要我将两者结合在脚本中，我不知道为什么我必须删除“隐藏”按钮才能获得动画效果

这是我的剧本

---

test.html：

---

更改样式，如图所示，如下所示：

<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>

/*输入动画的起始CSS样式*/
.淡入淡出{
过渡：0.5s线性所有；
不透明度：0；
}
/*输入动画的完成CSS样式*/
.fade.ng-enter.ng-enter-active{
不透明度：1；
}

将淡入淡出类添加到您的div：

<div ng-if="doc.div_show" class="fade">Hello World</div>

你好，世界

<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 ng-if="doc.div_show" class="fade">Hello World</div>