如何使用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动画面板？

回答

相关问题