Try to add animation enter leave and move effect in my ng-repeat but it doesn't work
any hints?
Script:
<script>
angular.module('lipapp', ["ngAnimate"]).controller('lipapp_Module_Control', function ($scope, $http, $window) {
$scope.CompaignBasket = [];
$scope.InitialCompaignBasket = function (){
.....Raw Data
}
}
CSS3
.animate-enter,
.animate-leave
{
transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
position: relative;
display: block;
}
.animate-enter {
-webkit-transition: 1s linear all; /* Chrome */
transition: 1s linear all;
opacity: 0;
}
.animate-enter , .animate-enter-active {
opacity: 1;
}
HTML(Using a nested ng-repeat):
<tr ng-repeat="item in CompaignBasket|filter:Keyword | orderBy:predicate:reverse" ng-animate="'animate'">
<td>{{item.Date}}</td>
<td>{{item.Donor}}</td>
<td>{{item.City}}</td>
<td>{{item.State}}</td>
<td ng-repeat="cause_item in item.DonorCauseAmount track by $index"><div ng-show="cause_item != 0">${{cause_item | number:0}}</div></td>
<td>${{item.Total|number :0}}</td>
</tr>
Let me know if you find anything that is missing to trigger the effect Thanks!
I'm not sure which version of Angular are you using but with Angular v1.2.. you can do that in way like below.
var app = angular.module('lipapp', ["ngAnimate"])
app.controller('MainCtrl', function($scope, $http, $window) {
$scope.CompaignBasket = [];
$scope.InitialCompaignBasket = function() {
var i = {
Date: 1,
Donor: "Mike",
City: "London",
State: "KK"
};
var j = {
Date: 1,
Donor: "Tyson",
City: "New York",
State: "KK"
};
var k = {
Date: 1,
Donor: "Terek",
City: "Manchester",
State: "KK"
};
$scope.CompaignBasket.push(i);
$scope.CompaignBasket.push(j);
$scope.CompaignBasket.push(k);
}
$scope.InitialCompaignBasket();
});
.animate.ng-enter,
.animate.ng-leave {
-webkit-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 500ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
position: relative;
text-overflow: clip;
white-space: nowrap;
}
.animate.ng-leave.animate.ng-leave-active,
.animate.ng-enter {
-webkit-transition: 1s linear all;
/* Chrome */
transition: 1s linear all;
opacity: 0;
}
.animate.ng-enter.ng-enter-active,
.animate.ng-leave {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.16/angular-animate.min.js"></script>
<body ng-app="lipapp">
<div ng-controller="MainCtrl">
<input type="text" ng-model="Keyword" />
<table>
<tr class="animate" ng-repeat="item in CompaignBasket|filter:Keyword | orderBy:predicate:reverse">
<td>{{item.Date}}</td>
<td>{{item.Donor}}</td>
<td>{{item.City}}</td>
<td>{{item.State}}</td>
<td ng-repeat="cause_item in item.DonorCauseAmount track by $index">
<div ng-show="cause_item != 0">${{cause_item | number:0}}</div>
</td>
<td>${{item.Total|number :0}}</td>
</tr>
</table>
</div>
</body>
Related
I have an application where I load the data using Angular JS ng-repeat.
HTML
<my-card my-details="assignee"
user-map="ctrl.usersMap">
</my-card>
</div>
</div>
</div>
</div>
Animation CSS
.animate-enter,
.animate-leave
{
-webkit-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 300ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
}
.animate-enter {
left: 100%;
}
.animate-enter.animate-enter-active {
left: 0;
}
.animate-leave {
left: 0;
}
All the data is rendered here horizontally.
I have a next and previous button which is used to fetch next/previous batch of assignees from the rest service. I need to animate this fetch in way that it should slide smoothly to the left when fetching next batch of records and then to the right when fetching previous batch of records.
Please see screenshot below:
Image-Screenshot
i am tying to achieve an Animation in Angular JS 1.4.0, which i'd like to be similar to the one, which can be found on this page (Angular 1.1.5):
http://www.nganimate.org/angularjs/ng-repeat/move
As I understand, there have been major changes to ngAnimate over the last few Versions.
I have recreated the important Part of my application with Plunkr. It can be found here http://plnkr.co/edit/9DK3LEAaGDgDT2kIILjG?p=preview
I want the Items, that show and hide, because of a different filter input, to be animated with a css animation.
This is my filter input:
<input type="text" class="form-control" ng-model="search">
And this is the list, in which all the Elements from the search show up.
<ul>
<li ng-class="item" ng-repeat="name in people | filter:search">
{{name.name}}
</li>
</ul>
Here are my CSS animations:
.item.ng-enter,
.item.ng-leave
{
-webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
position: relative;
display: block;
}
.item.ng-enter.item.ng-enter-active,
.item.ng-leave {
opacity: 1;
top: 0;
height: 30px;
}
.item.ng-leave.item.ng-leave-active,
.item.ng-enter {
opacity: 0;
top: -50px;
height: 0px;
}
The search and filters work fine, but the CSS animations are not triggered.
I would be very glad, if someone had a solution to this problem!
The latest version like angular 1.4 the approach is bit different. First of all you should include angular animate js.
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular-animate.js"></script>
Then you should inject 'ngAnimate' to module like this.
var app = angular.module('myApp', ['ngAnimate']);
also use class like this in along with ng-reapeat
<li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
also use css for animate like below
.animate-repeat {
line-height:40px;
list-style:none;
box-sizing:border-box;
}
.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
opacity:0;
max-height:0;
}
.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
opacity:1;
max-height:40px;
}
more references
First time trying to use angular animations and can't work out what I'm doing wrong.
I'm using AngularJS v1.3.0-build.2805 for both Angular itself and Animation module.
-1. Module is included
angular.module('profileApp', [
'ngAnimate'
]);
-2. Defining styles in css
.fade-in{
transition: 1s linear all;
-webkit-transition: 1s linear all;
}
.fade-in.ng-enter,
.fade-in.ng-leave.ng-leave-active{
opacity: 0;
}
.fade-in.ng-enter.ng-enter-active,
.fade-in.ng-leave{
opacity: 1;
}
-3. Including class in ng-repeat
<a class="item fade-in" ng-repeat="item in collection" href="{{client.getPath('product/'+item.slug)}}">
<div class="thumb">
<img ng-src="{{item.images[0].imagename}}" alt="{{item.style_name}}">
</div>
<h3>{{item.style_name}}</h3>
</a>
What am I missing here??
Here's a great tutorial about staggering animation in angularjs, by yearofmoo
as stated in the comments to your question,by pixelbits:
If you want to stagger the animation on load, then you have to push items into your array rather than assign the entire array to scope.
he also provided a nice plunkr that shows how to properly make the animation.
list.html
<div id="list-wrap">
<ul id="page-list">
<li class="page-list-item" ng-repeat="item in items" ng-click="tapHandle(this)">
<span class="page-list-text">{{ item }}</span>
</li>
</ul>
</div>
style.css:
.page-list-item.ng-enter-stagger,
.page-list-item.ng-leave-stagger {
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-ms-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
-webkit-transition-duration: 0;
-moz-transition-duration: 0;
-ms-transition-duration: 0;
-o-transition-duration: 0;
transition-duration: 0;
}
.page-list-item.ng-enter {
-webkit-transition: 0.2s linear all;
-moz-transition: 0.2s linear all;
-ms-transition: 0.2s linear all;
-o-transition: 0.2s linear all;
transition: 0.2s linear all;
-ms-opacity: 0;
opacity: 0;
}
.page-list-item.ng-enter.ng-enter-active {
-ms-opacity: 1;
opacity: 1;
}
.page-list-item.ng-leave {
-webkit-transition: 0.2s linear all;
-moz-transition: 0.2s linear all;
-ms-transition: 0.2s linear all;
-o-transition: 0.2s linear all;
transition: 0.2s linear all;
-ms-opacity: 1;
opacity: 1;
}
.page-list-item.ng-leave.ng-leave-active {
-ms-opacity: 0;
opacity: 0;
}
I'm using AngularJS version 1.2.11. I've set a toolbar to slide in and out with a transition using ng-Animate (show and hide).
Here is the HTML:
<div>
<div class="full-height">
<menu-main class="full-height pull-left"></menu-main>
<menu-sub class="full-height pull-left" ng-show="data.active" ng-animate="'animate'">
</menu-sub>
</div>
</div>
And here is the CSS for the same toolbar element
.animate.fade-hide, .animate..fade-show {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 3.5s;
}
.animate.fade-hide, {
position: fixed;
top: 500px;
opacity: 0.3;
}
.animate.fade-hide, .animate.fade-hide-active
{
position: fixed;
top: 500px;
opacity: 0.3;
}
.animate.fade-show {
position: fixed;
top: 100px;
opacity: 1;
}
.animate.fade-show, .animate.fade-show-active {
position: fixed;
top: 100px;
opacity: 1;
}
The animation does not work, and I'm not sure if I'm doing this correctly.
The ng-animate attribute is deprecated in 1.2 and no longer used. Instead, animations are now class based.
Also make sure you are referencing angular-animate.js and adding ngAnimate as a dependent module:
var app = angular.module('myApp', ['ngAnimate']);
You then name your animations, for example 'fadein' and 'fadeout', and decorate them with some additional classes following a special naming convention that can be found in the Angular documentation.
Another good source on the topic is Year of moo.
Fadein example:
/* After the transition this will be the only class remaining */
.fadein {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1.5s;
opacity: 1; /* Default value but added for clarity */
}
/* Initial state when showing */
.fadein.ng-hide-remove {
opacity: 0;
display: block !important;
}
/* Will transition towards this state */
.fadein.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
Demo: http://plnkr.co/edit/V9w2EwUh0unszf62TZZB?p=preview
I'm trying to achieve sliding effect with the new ng-animate feature of Angular. I've taken some code from the demo site and have prepared a fiddle.
The problem is that elements below the sliding DIV keeps shifting up and down when the item is being swapped from the array. I tried with line-height but no success.
Is it possible to fix the above behavior? or any better way to achieve it only with angular and CSS?
You can wrap the input and the button in a div and also put it in the absolute position.
Here is a demo
HTML
<div ng-app="">
<div ng-controller='anim' >
<div ng-repeat="item in lst" ng-animate=" 'wave' ">
{{item}}
</div>
<div class="wrapperInput">
<input ng-model="cmt">
<button ng-click="clk()"> Slide </button>
</div>
</div>
</div>
CSS
</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<style>
/**/
.wrapperInput{position:absolute;top:30px;}
/**/
.wave-enter-setup, .wave-leave-setup {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;
line-height:100%;
}
.wave-enter-setup {
position:relative;
left:100%;
line-height:100%;
}
.wave-enter-start {
left:0;
line-height:100%;
}
.wave-leave-setup {
position:absolute;
left:0;
line-height: 100%;
}
.wave-leave-start {
left:-100%;
line-height: 10%;
}
JS
function anim($scope,$timeout){
$scope.lst = [];
$scope.master = ['[1] John who is 25 years old.','[2] Jessie who is 30 years old.','[3] Johanna who is 28 years old.','[4] Joy who is 15 years old.','[5] Mary who is 28 years old.','[6] Peter who is 95 years old.','[7] Sebastian who is 50 years old.','[8] Erika who is 27 years old.','[9] Patrick who is 40 years old.','[10] Samantha who is 60 years old.'];
$scope.lst.unshift($scope.master[Math.floor((Math.random()*10)+1)]);
$scope.clk = function() { clik();}
function clik() {
//alert('here');
$scope.lst.unshift($scope.master[Math.floor((Math.random()*10)+1)]);
$scope.lst.pop();
$timeout(function(){ clik();},2000);
}
clik();
};
Try this :
CSS:
.wave-enter-setup, .wave-leave-setup {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) .5s;
position:relative;
display:table;
float:left;
}
.wave-enter-setup {
left:100%;
}
.wave-enter-start {
left:0;
}
.wave-leave-setup {
left:0%;
}
.wave-leave-setup.wave-leave-start {
left:-100%;
}
.floatNone{ clear:both; position:relative;}
HTML:
<div ng-app="">
<div ng-controller='anim' >
<div ng-repeat="item in lst" ng-animate=" 'wave' " >{{item}}</div>
<div class="floatNone">
<input ng-model="cmt" >
<button ng-click="clk()"> Slide </button>
</div>
</div>
</div>