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它非常有用。

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

1 个答案: