javascript - 隐藏动画在 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'])

> ionic 信息输出

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

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

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

最后，定义一个 Controller 如下:

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

  $scope.hide = false;

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

})

这应该是您需要重现的全部内容。