AngularJS動畫元素

我想一些動畫添加到我的angularjs應用，以及衝浪運球，我發現這個例子：AngularJS動畫元素

material design animation

有人能指出我爲實現這一效果的正確方向？有沒有一些庫在做這項工作，還是完全是手工的？

注意2級的動畫，一個從前面黃色按鈕擴展到整個區域，後區域滑動/漸行漸遠

2015-06-25 kitensei

我想你會發現，這是不實際的按鈕演變成另一種元素 - 但僅僅是它消失，黃色窗格中消失，如果我建立這個，我。 d看看這種結構： 1.按鈕被點擊並移動到底部窗格的中心 - 然後變得不可見 2.底部窗格幻燈片左側隱藏時間/日期 3.另一個窗格淡入某種動畫 – LT86

我給你舉個例子，你可以改變的影響，以滿足您的需求！

var app = angular.module('myApp', ['ngAnimate', 'fmp-card']); 
 

 
app.controller('MainCtrl', function($scope) { 
 
    $scope.leftBackText = 'Here you can insert anything you want, may be a page!'; 
 
    $scope.rightBackText = "http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69"; 
 
});

.my-card{ 
 
    display: inline-block; 
 
} 
 

 
.back-text{ 
 
    padding-top: 60px; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
} 
 

 
#container{ 
 
    width: 100%; 
 
} 
 

 
#card-1{ 
 
    float: left; 
 
} 
 

 
#card-2{ 
 
    float: left; 
 
}

<!DOCTYPE html> 
 
<html ng-app="myApp"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 
    <title>AngularJS Flip Card</title> 
 
    <link href="style.css" rel="stylesheet" /> 
 
    <link href="https://rawgit.com/souly1/angular-flip-card/master/css/fmpCardDirective.css" rel="stylesheet" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
 
    <script data-require="[email protected]" src="https://code.angularjs.org/1.3.6/angular.min.js" data-semver="1.3.6"></script> 
 
    <script data-require="[email protected]*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular-animate.min.js"></script> 
 
    <script src="https://rawgit.com/souly1/angular-flip-card/master/fmpCardDirective.js"></script> 
 
    <script src="app.js"></script> 
 
</head> 
 

 
<body ng-controller="MainCtrl"> 
 
    <div id="container"> 
 
    <fmp-card class="my-card" id="card-1" suffix="left" image="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69" front-caption="Left Card" small-card-width="200px" small-card-height="200px"> 
 
     <div class="back-text"><img src={{rightBackText}} /></div> 
 
    </fmp-card> 
 
    <fmp-card class="my-card" id="card-2" suffix="right" image="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69" front-caption="Right Card" small-card-width="200px" small-card-height="200px"> 
 
     <div class="back-text">{{leftBackText}}</div> 
 
    </fmp-card> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2015-09-05 03:59:16 65656565656

投票的解釋？ – 65656565656

謝謝你的例子，但我的問題更多的是關於按鈕變形的元素，反之亦然，而不是簡單的動畫。 – kitensei

AngularJS動畫元素

回答

相關問題