如何使用Angular + Famo.us動畫面板？

我很想使用Famo.us的力量來爲我的Angular項目中的一些元素製作動畫。我正試圖讓我的頭腦如何與Bootstrap一起使用。如何使用Angular + Famo.us動畫面板？

例如：我想在加載時爲面板設置動畫。我可以將fa-directive添加到當前的HTML中嗎？我會愛他們只是在2秒內出現。

<div class="row"> 
    <fa-surface ng-repeat="item in data | filter:search"> 
    <div class="col-md-2"> 
     <div class="panel panel-{{ item.panel }} panel-dark panel-body-colorful widget-profile widget-profile-centered"> 
      <div class="panel-heading"> 
       <i ng-hide="item.img" class="fa fa-user widget-profile-avatar" style="font-size: 5em;"></i> 
       <img ng-show="item.img" ng-src="item.img" alt="" class="widget-profile-avatar"> 
       <div class="widget-profile-header"> 
        <span>{{ item.firstname }} {{ item.lastname }}</span><br> 
       </div> 
      </div> <!--/.panel-heading --> 
      <div class="panel-body"> 
       <div class="widget-profile-text" style="padding: 0;"> 
        {{ item.type }} 
       </div> 
      </div> 
     </div> 
    </div> 
    </fa-surface> 
</div>

有人能帶我進入正確的方向嗎？

來源

2014-09-06 Tino

可以使用FA-動畫指令這樣在單擊例如，在你的HTML：在你的角度控制器

<fa-modifier fa-size="[100, 100]" fa-translate="boxTransitionable.get()"> 
     <fa-surface fa-background-color="'red'" fa-click="animate()"> 
      <!---panel---> 
     </fa-surface> 
    </fa-modifier>

：

var Transitionable = $famous['famous/transitions/Transitionable']; 
var Easing = $famous['famous/transitions/Easing']; 

$scope.boxTransitionable = new Transitionable([0, 0, 0]); 

$scope.animate = function() { 
    $scope.boxTransitionable.set([200, 300, 0], {duration: 2000, curve: Easing.inOutBack}); 
    };

Source

使用famo.us/angular docs這是非常棘手的。

來源

2014-09-07 03:26:07

Thx爲答案。 Famou.us保持自舉佈局嗎？響應等？ – Tino 2014-09-07 08:58:49

是的，但你必須把類放在適當的標籤中，類放在fa-surfaces中並指定fa-app的高度和寬度......等，仔細閱讀famo.us/angularjs文檔，會得到你想要的。 – 2014-09-07 11:24:10

如何使用Angular + Famo.us動畫面板？

回答

相關問題