Javascript 隐藏动画不工作在爱奥尼亚

我正在学习Ionic框架，并尝试使用CSS将show\hide fade动画添加到“card”中。我已经定义了1秒的持续时间转换动画，但在单击按钮1秒后，目标元素将消失，而没有任何动画

这是我的密码

HTML

<ion-list class="card step-card" ng-show="s1">
      <ion-item>Add some salt</ion-item>
      <ion-item class="item-button-right">
        &nbsp;
        <button class="button" ng-click="showNextStep()">Next</button>
      </ion-item>
</ion-list>

JS

.step-card
{
    transition: all linear 1s;
    opacity: 1;
}
.step-card.ng-hide-add
{
    opacity: 0;
}
.step-card.ng-hide-remove
{
    opacity: 1;
}

angular.module('starter', ['ionic', 'ngAnimate'])

离子信息输出

******************************************************                                                        
 Dependency warning - for the CLI to run correctly,                                                           
 it is highly recommended to install/upgrade the following:                                                   

 Please install your Cordova CLI to version  >=4.2.0 `npm install -g cordova`                                 
 Install ios-sim to deploy iOS applications.`npm install -g ios-sim` (may require sudo)                       
 Install ios-deploy to deploy iOS applications to devices.  `npm install -g ios-deploy` (may require sudo)    

******************************************************                                                        

Your system information:                                                                                      

Cordova CLI: Not installed                                                                                    
Ionic CLI Version: 2.1.8                                                                                      
Ionic App Lib Version: 2.1.4                                                                                  
ios-deploy version: Not installed                                                                             
ios-sim version: Not installed                                                                                
OS: Windows 10                                                                                                
Node Version: v7.1.0                                                                                          
Xcode version: Not installed                                                                                  


******************************************************                                                        
 Dependency warning - for the CLI to run correctly,                                                           
 it is highly recommended to install/upgrade the following:                                                   

 Please install your Cordova CLI to version  >=4.2.0 `npm install -g cordova`                                 
 Install ios-sim to deploy iOS applications.`npm install -g ios-sim` (may require sudo)                       
 Install ios-deploy to deploy iOS applications to devices.  `npm install -g ios-deploy` (may require sudo)    

******************************************************  

请帮我解决这个问题。

---

提前感谢

您不需要明确地包括ngAnimate，因为离子型已经包括它了

准备了一个小的游乐场示例，简而言之，使用

.ng hide

可以实现以下功能：

.animate-hide 
{
  /*
   * ...
   */

  -webkit-transition: opacity ease-in-out .5s;
  -moz-transition: opacity ease-in-out .5s;
  -o-transition: opacity ease-in-out .5s;
  transition: opacity ease-in-out .5s;

  opacity: 1;
}

.animate-hide.ng-hide 
{
  opacity: 0;
}

检查此链接以了解工作示例：

编辑：精简我的代码，使用$scope而不是controllerAs语法，因为这可能更直接。要在本地复制此示例，只需启动一个空白的Ionic应用程序并添加以下内容：

在模板中，添加此按钮和此div：

切换隐藏
喵，我的奴隶在哪里？我饿了，但是燕尾服猫总是看起来很整洁，跳起来扑到小毛线鼠身上，玩具店的裸牙躲在垃圾箱里，直到有食物吃了，但是我的奴隶人没有给我任何食物，所以我在地板上大便。计划统治世界的步骤。走进一个房间，决定你无论如何都不想呆在那里，早上4点叫醒人类，在床下吃东西，把死去的动物作为礼物。

在css文件中添加以下内容：

。按钮
{
-webkit过渡：所有的易入易出。5s；
-moz过渡：全部轻松输入输出。5s；
-o型过渡：所有易于进出。5s；
过渡：全部轻松进出。5s；
}
.制作隐藏动画
{
利润率：24px0；
填充：6px；
边框：1px纯黑；
-webkit过渡：不透明度易入易出。5s；
-moz过渡：不透明度减少，减少5秒；
-o型过渡：不透明度缓进缓出。5s；
过渡：不透明度减少。5秒；
不透明度：1；
}
.为隐藏设置动画
{
不透明度：0；
}

最后，定义一个控制器，如下所示：

---

这就是你需要复制的全部

动画通常在爱奥尼亚中工作。但是在我的例子中，它不起作用，因为我试图使用

ng show

属性设置

元素的动画

<ion-list class="card step-card" ng-show="s1">
      <ion-item>Add some salt</ion-item>
      <ion-item class="item-button-right">
        &nbsp;
        <button class="button" ng-click="showNextStep()">Next</button>
      </ion-item>
</ion-list>

加点盐
下一个

我不知道确切的原因，但我不能使它充满活力。 所以，我找到了另一种方法，然后它就完美地工作了。我将上述代码更改为如下内容：

<div class="step-card" ng-show="s1">
    <ion-list class="card">
      <ion-item>Add some salt</ion-item>
      <ion-item class="item-button-right">
        &nbsp;
        <button class="button" ng-click="showNextStep()">Next</button>
      </ion-item>
    </ion-list>
</div>

加点盐
下一个

如您所见，我没有设置

动画，而是将其封装在

中，现在使用

ng show

属性设置

动画。（现在，您可以在CSS中使用

.ng hide add

.ng hide remove

来制作动画。或者，使用著名的

animate.CSS

文件制作精彩的动画）

此外，正如OClyde所指出的，没有必要明确地将

ngAnimate

作为依赖项。它已经包含在爱奥尼亚

建议：如果你想在爱奥尼亚学习动画，首先在简单的html元素上尝试它们，如

等，然后再跳到爱奥尼亚特有的标签，如

---

对于一个简单的动画工作示例，您可以参考OClyde答案。

我认为ngAnimate和Ionic之间可能存在一些问题。请访问之前的帖子，尝试解决这些问题。尝试了animate.css方式，但仍然发生同样的事情。您的演示可以在线运行，但当我在Ionic应用程序中执行相同操作时，它不起作用。有没有办法下载你的演示并在我的电脑上运行，看看我的电脑或爱奥尼亚版本是否有问题？编辑了我的答案，包括本地复制的所有步骤。不幸的是，爱奥尼亚游乐场还没有下载按钮。；）我完全按照您的步骤复制代码，现在我可以看到，当我从PC上运行它时，div在按钮单击时显示和隐藏，但没有动画。此外，按钮的颜色从红色变为黑色，但立即没有动画（即红色不会逐渐变为黑色）。至少现在我可以确认错误在其他地方。我在Chrome控制台中看到以下错误：GET？ionicplatform=android:91错误：GET？ionicplatform=android:91错误：GET-ionic lab:182错误：GET-net:：ERR_NAME_NOT_RESOLVED（匿名函数）@ionic lab:182（匿名函数）@ionic lab:183我有+1关于演示工作和你们的答案。一旦它在我的电脑上运行，我将接受它

<div class="step-card" ng-show="s1">
    <ion-list class="card">
      <ion-item>Add some salt</ion-item>
      <ion-item class="item-button-right">
        &nbsp;
        <button class="button" ng-click="showNextStep()">Next</button>
      </ion-item>
    </ion-list>
</div>