All geek questions in one place

AngularJS Animation Element

I would like to add some animations to my angularjs apps and surf dribbling. I found this example:

material design animation

Can someone point me in the right direction to achieve this effect? Are there any libraries that do the job, or is it completely artisanal?

Please note that 2 animations, one of the front yellow button, expanding to the full area, and the rear area slides / disappears

+6
source share
1 answer

I will give you an example, you can change the effects to meet your needs!

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

Source: https://habr.com/ru/post/989750/

More articles:


All Articles