隐藏动画在 Ionic 中不起作用

Question

我正在学习 Ionic 框架，我正在尝试使用 CSS 将显示\隐藏淡入淡出动画添加到“卡片”。我已经定义了 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>

CSS

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

JS

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)    

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

请帮我解决问题。 提前谢谢！！！

Answer 1

动画通常在 Ionic 中工作。但是在我的情况下它不起作用，因为我试图使用 <ion-list> 属性为 <ion-list> 元素设置动画。

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

如您所见，我没有为<ion-list> 设置动画，而是将其封装在<div> 中，现在我正在使用ng-show 属性为<div> 设置动画。 （现在，您可以在 CSS 中使用 .ng-hide-add .ng-hide-remove 来制作动画。或者，著名的 animate.css 文件可以制作很棒的动画）

此外，正如 OClyde 所指出的，没有必要明确地将 ngAnimate 包含为依赖项。它已经包含在 Ionic 中。

建议：如果您想在 Ionic 中学习动画，请先在简单的 html 元素（如 <div> <span> 等）上尝试它们，然后再跳转到 Ionic 特定标签（如 <ion-list>）。

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

Answer 2

您不需要明确包含 ngAnimate，因为 Ionic 已经包含它。

准备了一个小操场示例，简而言之，只需使用 .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;
}

查看此链接以获取工作示例：http://play.ionic.io/app/6927b6ff5207

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

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

<!-- omit this outer div if you load the controller in your routing -->
<div ng-controller="AwesomeCtrl">    

  <button 
    class="button button-block"
    ng-class="{
      'button-dark' : hide,
      'button-assertive' : !hide
    }"
    ng-click="toggle()">
    Toggle hiding
  </button>

  <div
    class="animate-hide"
    ng-show="!hide"
    >
    Mew where is my slave? I'm getting hungry yet tuxedo cats always looking dapper jump launch to pounce upon little yarn mouse, bare fangs           at toy run hide in litter box until treats are fed but my slave human didn't give me any food so i pooped on the floor. Plan steps for             world domination. Go into a room to decide you didn't want to be in there anyway wake up human for food at 4am and under the bed, for              leave dead animals as gifts. 
  </div>

</div>

在你的 css 文件中添加：

.button
{
  -webkit-transition: all ease-in-out .5s;
  -moz-transition: all ease-in-out .5s;
  -o-transition: all ease-in-out .5s;
  transition: all ease-in-out .5s;
}

.animate-hide 
{
  margin: 24px 0;
  padding: 6px;
  border: 1px solid black;

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

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

app.controller('AwesomeCtrl', function($scope) {

  $scope.hide = false;

  $scope.toggle = function() 
  {
    $scope.hide = !$scope.hide;
  }

})

这应该是您复制所需的全部内容。