角动画不添加NG隐藏添加和NG-捉迷藏添加活性

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title></title> 
    <script src="node_modules/angular/angular.js" defer></script> 
    <script src="node_modules/angular-animate/angular-animate.js" defer></script> 
    <!-- Own script section --> 
    <script src="app.js" defer></script> 
    <!-- CSS section --> 
    <link rel="stylesheet" type="text/css" href="style.css"> 

</head> 
<body ng-app="MainApp"> 
    <div ng-controller="MainController as mainCtrl"> 
     <span class="test" ng-init="showSpan=true" ng-click="showSpan=false" ng-show="showSpan">Test</span> 
    </div> 
</body> 
</html>

App.js：角动画不添加NG隐藏添加和NG-捉迷藏添加活性

(function() { 
    angular.module('MainApp', ['ngAnimate']) 
     .controller('MainController', function() { 

     }); 
})();

风格：

.test { 
    font-size: 30px; 
    font-weight: bold; 
} 
.test.ng-hide-add { 
    opacity: 1; 
} 
.test.ng-hide-add-active { 
    opacity: 0; 
    transition: opacity 1s linear; 
}

角应该添加到跨越在点击ng-hide-add和ng-hide-add-active之后，但是这不会发生。为什么？？我使用最新的角度和角度动画。 Angular只在点击后添加ng-hide。

来源

2015-08-18 Artur Kasperek

showSpan未在控制器中创建。

(function() { 
    angular.module('MainApp', ['ngAnimate']) 
     .controller('MainController', function($scope) { /* dont forget to call $scope here */ 
      $scope.showSpan = true; /* this must exists */ 
     }); 
})();

Look！

来源

2015-08-18 17:46:50

我观察到的变化是，我张贴在plunker，但在我的电脑不工作相同的代码，很奇怪 –

您正在完成css（.test.ng-hide-add-active css）中缺少.ng-hide-add。

http://plnkr.co/edit/dtyTHz30EiFV4PEjMWN8?p=preview

.test.ng-hide-add { 
    opacity: 1; 
} 

/* The finishing CSS styles for the hide animation */ 
.test.ng-hide-add.ng-hide-add-active { 
    transition: 1s linear all; 
    opacity: 0; 
}

来源

2015-08-18 17:54:15 Bharat

这不能帮助我 –

你能更具体吗？它不工作..你期望消失吗？ – Bharat

当我使用webstorm在本地主机上启动我的应用时，角度不要添加到span class ng-hide-add，ng-hide-add-active中。在同样的例子中，同样的例子工作正常。 –

当我使用这个：

<script data-require="[email protected]" data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js"></script> 
<script data-require="[email protected]" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular-animate.js"></script>

一切工作正确的，问题是与角分布。

来源

2015-08-18 19:31:02

问题解决了，我必须用角动画1.4.3，probebly在1.4.4有，我还没有看不到

来源

2015-08-18 20:05:33

角动画不添加NG隐藏添加和NG-捉迷藏添加活性

回答

相关问题