有沒有一種有角度的動畫方式來模擬這種ng級的行爲

我試圖使用ng-animate包含在我的控制器中 app = angular.module（'Packs'，['ngAnimate']）; 這是我的風格：有沒有一種有角度的動畫方式來模擬這種ng級的行爲

<style> 
    .animate-in { 
     opacity: 0; 
     max-height: 0; 
     overflow: hidden; 
     -webkit-transition: all 0.5s; 
     -moz-transition: all 0.5s; 
     transition: all 0.5s; 
    } 
    .animate-out{ 
     opacity: 1; 
     max-height: 200px; 
     -webkit-transition: all 0.5s; 
     -moz-transition: all 0.5s; 
     transition: all 0.5s; 
    } 
</style>

這是不工作的，那麼，它的工作的HTML，只是我不得不這樣做手工切換類，我想用NG-動畫

<div ng-click="toggle('pack1')"> 
    <div class="text" 
     ng-class="{'animate-in' : !displays.pack1, 
       'animate-out' : displays.pack1}"> 
          Some text to toggle 
    </div> 
</div>

來源

2015-04-28 osueboy

那麼，什麼是你的問題？你是什麼意思手動？你期望會發生什麼，實際上做了什麼？ –

它有一個摺疊效果，但我不能得到它以這種方式工作 https://docs.angularjs.org/api/ng/directive/ngIf#animations – osueboy

所以也許我失去了一些東西，當我從假切換PACK1爲true，納克級的動畫從動畫，在動畫輸出切換，我也得到了良好的效果，但我真正想要做的是使用NG-IF =「PACK1」和動畫=「類名」，但對於某些原因，我花了一個小時，無法做到。即時通訊使用角1.2.x btw – osueboy

是的，在你的文本中使用ng-show = "displays.pack1"，然後使用特殊類ng-hide/ng-hide-active，見例如in the documentation

這裏是一個的jsfiddle顯示不透明度和高度的切換：http://jsfiddle.net/1djeqjfm/1/

.box.ng-hide { opacity:0; } 
.box.ng-hide-active { opacity:1; }

（或使用ng-if及其類ng-enter/ng-leave）

來源

2015-04-28 21:51:50 floribon

有沒有一種有角度的動畫方式來模擬這種ng級的行爲

回答

相關問題