Question

我想在我的angularjs应用程序中添加一些动画，并在运球上冲浪我发现了这个例子：

material design animation

有人能指出我达到这个效果的正确方向吗？是否有一些图书馆在做这项工作还是完全是手工艺的？

注意2个动画，前面的黄色按钮扩展到整个区域，后面区域滑动/渐渐消失

Answer 1

我给你举个例子，你可以改变效果来满足你的需求！

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="angular.js@1.3.x" src="https://code.angularjs.org/1.3.6/angular.min.js" data-semver="1.3.6"></script>
  <script data-require="angular-animate@*" 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>

AngularJS动画元素

1 个答案: