एनिमेट मैं अपने AngularJS आवेदन करने के लिए कुछ एनिमेशन जोड़ने के लिए, और ड्रिबल पर सर्फिंग मैं इस उदाहरण पाया चाहते हैं:AngularJS तत्व
कोई इस आशय प्राप्त करने के लिए सही दिशा करने के लिए मुझसे बात कर सकते हैं? क्या काम करने में कुछ libs हैं या यह पूरी तरह से artisanal है?
सूचना 2 एनिमेशन, सामने पीला बटन पूर्ण क्षेत्र के विस्तार से एक है, और वापस क्षेत्र रपट/दूर
fading मैं आपको एक उदाहरण दे रहा हूं, आप अपनी जरूरतों को पूरा करने के लिए प्रभाव को बदल सकते हैं !
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>नीचे वोट के लिए स्पष्टीकरण? – 65656565656
अपने उदाहरण के लिए धन्यवाद, लेकिन मेरे सवाल का एक तत्व और सरल एनीमेशन से उपाध्यक्ष प्रतिकूल करने के लिए बटन morphing के बारे में अधिक है। – kitensei
मुझे लगता है कि आप पाएंगे कि यह वास्तव में बटन एक और तत्व में morphing नहीं है - लेकिन बस यह गायब हो जाता है और एक पीले रंग की फलक में fades तो मैं इस निर्माण किया गया था, मैं कि। संरचना के इस प्रकार पर घ देखो: 1. बटन क्लिक किया जाता है और नीचे फलक के केंद्र के लिए ले जाता है - तो हो जाता है अदृश्य 2. निचले फलक स्लाइड बार को छिपाने के लिए छोड़ दिया/ 3. एक और फलक के कुछ प्रकार के साथ में fades तारीखें एनीमेशन – LT86