如何使用 Angular + Famo.us 为面板设置动画？

Question

我很想利用 Famo.us 的强大功能为我的 Angular 项目中的一些元素制作动画。我正在努力弄清楚如何将它与 Bootstrap 一起使用。

例如：我想在面板加载时为其设置动画。我可以将 fa 指令添加到当前的 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>

谁能引导我走向正确的方向？

Answer 1

您可以使用像这个点击示例这样的 fa-animation 指令， 在你的 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 非常有用。