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
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
In this plunk I am trying to have a div slide in from the right side, then slide back to hide. Clicking on the checkbox shows/hides the div.
I almost made this work, I cannot make the transition to slide, the div just shows up and hides without transitioning. Any ideas?
HTML:
Show <input type="checkbox" ng-model="checked">
<div class="panel" ng-show="checked" style="border:1px solid #dddddd;background:orange;width:200px">
<input type="checkbox"> Charts
<br/>
<input type="checkbox"> Reports
<br/>
<input type="checkbox"> Files
<br/>
</div>
CSS:
.panel{
position: fixed;
top: 10px;
right: -2px;
}
.panel.ng-show-add {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
}
.panel.ng-show-add-active {
display: block;
}
Firstly, to use ngShow animations, you need ngAnimate, so I added that.
I also updated the plunker to use a newer version of angular for the sake of ease and compatibility. If you are using an older version of angular, just use the appropriate version of ngAnimate.
You need this to make it apply the styles correctly (per the docs):
.panel.ng-hide-add, .panel.ng-hide-remove {
/* this is required as of 1.3x to properly
apply all styling in a show/hide animation */
transition: 0s linear all;
}
Then you need to make sure you apply your transitions to the active add and active remove for hide:
.panel.ng-hide-add-active, .panel.ng-hide-remove-active {
/* -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 2s;
*/
transition: all ease-in-out 2s;
}
Note that I left your cubic-bezier transitions in there for reference, but have them commented out just to get things working.
I then added a hidden (start) position for it.
.panel.ng-hide {
right: -200px;
}
So...not sure if this works for you, but you said you needed it to slide, so it does that. Not sure why you need the cubic-bezier transition for that, though I am not that familiar with it.
Animation Demo
As an aside, angular doesn't animate through an ng-show class, it does it through ng-hide, thus the ng-hide-remove/ng-hide-add and the -active versions of those classes. It may be confusing if you try to use those and wonder why things aren't working. It's because they don't get used.
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>
I am developing a angular app where i am using animation in ng-show attribute on button click to show and hide a div element .It works fine in the hide case but it does not work fine in show case it immediately shows the element without the animation.You can see the same behavior in the example
:http://yearofmoo-articles.github.io/angularjs-animation-article/app/#/ng-show-hide .
My Code is
<div class="row-fluid">
<button class="btn btn-large btn-success pull-right" type="button" ng-click="showtravelSchedule=!showtravelSchedule">Search</button>
</div>
<div class=" span3 module offset1 community-bulletin" ng-show="showtravelSchedule" ng-animate="{show: 'example-show', hide: 'example-hide'}">
</div>
and css is
.example-show, .example-hide {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.example-show {
opacity:0;
}
.example-show.example-show-active {
opacity:1;
}
.example-hide {
opacity:1;
}
.example-hide.example-hide-active {
opacity:0;
}
I refactored it a bit, and it seems to be working with this setup:
.example-show, .example-hide {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.example-show.example-show-active,
.example-hide {
opacity:1;
}
.example-hide.example-hide-active,
.example-show {
opacity:0;
}
Not sure why it makes a difference.
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>