CODEWITHSUNDEEP
angularjstwitter-bootstrapfamo.us
Tino
Tino

Reputation: 3368

How to animate a panel with Angular + Famo.us?

I would love to use the power of Famo.us to animate some of my elements in my Angular project. I'm trying to get my head around how to use it with Bootstrap.

For example: I would like to animate a panel when they're loaded. Can I just add the fa-directives into the current HTML? I would love them just to appear within 2 seconds. 

<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>

Could anyone lead me into the right direction?

Upvotes: 1

Views: 358

Answers (1)

Mohamed Seif
Mohamed Seif

Reputation: 420

You can use fa-animation directive like this on-click example, in your 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>

in your angular controller:

 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

use the famo.us/angular docs it's very heplful.

Upvotes: 1

Related Questions