I have made the animation of a showing/hiding a list of messages. See this plunk. But how can I adapt it to also make an animation when a message is removed from the list?
My css:
.messages-active.messages {
max-height: 50px;
}
.messages {
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-ms-transition: max-height 1s;
-o-transition: max-height 1s;
transition: max-height 1s;
background-color: AntiqueWhite;
overflow: hidden;
max-height: 0;
}
My index file (using Angular):
<body ng-app="app" ng-controller="TestCtrl as test">
<button ng-click="test.toggle = !test.toggle">Show messages</button>
(current: {{test.toggle}})
<div class="messages" ng-class="{ 'messages-active': test.toggle }" ng-repeat="message in test.messages">
{{message}} <a href ng-click="test.remove($index)">remove</a>
</div>
</body>
The idea is to set the height of container and add transition to the height.
$scope.styles.height = $scope.messages.length * 20 + 'px';
http://plnkr.co/edit/3dnGeVoQ1DbX55WQtJjk?p=preview
You can try following if it may help you.
On clicking remove instead removing element just add class messages-remove on it's parent div messages.
For e.g: It should become <div class="messages" to <div class="messages messages-remove".
Also add the following CSS in your style sheet.
.messages-active.messages-remove.messages,
.messages-remove.messages { max-height: 0px; }
Let me know if you have any question.
I have simple css animation effect:
.sample-show-hide {
-webkit-transition:all linear 1.5s;
transition:all linear 1.5s;
}
.sample-show-hide.ng-hide {
opacity: 0;
}
.sample-show-hide.ng-show {
opacity: 1;
}
I tried to animate md-button with it. Animation is fine for showing, but on hidding there is no effect. When I changed to simple <button> tag, animation works for both show/hide. Is there way to fix it?
ng-hide have property transition: none, use the following css
.sample-show-hide {
-webkit-transition:all linear 1.5s !important;
transition:all linear 1.5s !important;
}
check on jsfiddle
I'm trying to apply an transition in ng-view with angular dart.
HTML:
<ng-view class="main-animation"></ng-view>
CSS:
.main-animation.ng-enter {
-webkit-transition: all 3000ms;
-moz-transition: all 3000ms;
-ms-transition: all 3000ms;
-o-transition: all 3000ms;
transition: all 3000ms;
opacity: 0;
}
.main-animation.ng-enter.ng-enter-active {
opacity: 1;
}
The animation doesn't work, the ng-enter and ng-enter-active class do not appear, and even if I simulate the class putting.
<ng-view class="main-animation ng-enter"><ngview>
The content is still rendering. Does ng-view in angular dart support animate?
I am using angular-ui-router with angularJS v1.2 and would like to implement custom page transitions.
How can I use ng-animate with ui-view (from angular-ui-router) rather than ng-view (which would be the standard way)? See Remastered Animation in AngularJS 1.2 for reference on ng-view.
EDIT:
I have tried two different versions of angular: v1.2.0-rc.2 and v1.2.0-rc.3 as suggested in the comments, but neither seems to do the trick. I guess I might be doing something wrong?
Here is the HTML:
<div ui-view class="slide"></div>
and the CSS:
.slide {
width:1024px;
height:768px;
}
.slide.ng-enter,
.slide.ng-leave {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
border: 1px solid blue;
}
.slide.ng-enter.ng-enter-active {
border: 1px solid red;
}
I added a JSfiddle of the previously mentioned example. It would be nice to expand this example to cover ng-view and ui-view, but I'm not sure how to get ng/ui-view and the partials into JSfiddle, though.
The bug is now closed and they've added an entry over at the ui-router Wiki. It also includes a demo Plunkr. I will copy the code example here, just in case the URL would become outdated.
HTML:
<div class="row">
<div class="span12 ui-view-container">
<div class="well" ui-view></div>
</div>
</div>
CSS:
/* Have to set height explicity on ui-view
to prevent collapsing during animation*/
.well[ui-view]{
height: 65px;
}
.ui-view-container {
position: relative;
}
[ui-view].ng-enter, [ui-view].ng-leave {
position: absolute;
left: 0;
right: 0;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
[ui-view].ng-enter {
opacity: 0;
-webkit-transform:scale3d(0.5, 0.5, 0.5);
-moz-transform:scale3d(0.5, 0.5, 0.5);
transform:scale3d(0.5, 0.5, 0.5);
}
[ui-view].ng-enter-active {
opacity: 1;
-webkit-transform:scale3d(1, 1, 1);
-moz-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1);
}
[ui-view].ng-leave {
opacity: 1;
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
}
[ui-view].ng-leave-active {
opacity: 0;
-webkit-transform:translate3d(100px, 0, 0);
-moz-transform:translate3d(100px, 0, 0);
transform:translate3d(100px, 0, 0);
}
Looks like this is fixed with UI Router 0.2.8.
I'm using AngularJS v1.2.7.
For an example, just add the "slide" class to your ui-view
<div ui-view class="slide">
And use the following css for your animation.
.slide {
-webkit-transition: -webkit-transform .7s ease-in-out;
-moz-transition: -moz-transform .7s ease-in-out;
-o-transition: -o-transform .7s ease-in-out;
transition: transform .7s ease-in-out;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide.ng-enter {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
}
.slide.ng-enter.ng-enter-active, .slide.ng-leave {
position: absolute;
-webkit-transform: translateX(0);
transform: translateX(0);
}
.slide.ng-leave.ng-leave-active {
-webkit-transform: translateX(100%);
transform: translateX(100%);
}
Additionally, some animations seemed to have some weird behavior because of $uiViewScroll. I worked around it by adding autoscroll="false" to my ui-view element.
Over the weekend, I created two plunks demonstrating view animations for both ui-view and ng-view
ui-view: http://plnkr.co/edit/jpebBk?p=preview
ng-view: http://plnkr.co/edit/LQhVYU?p=preview
angular-ui-router 0.2.8 came with fixes to major view animation bugs
I just posted a tutorial with a working demo for using ngAnimate (1.4.8) with UI Router.
It shows a couple of different view animations, a fade in transition on the main view and a slide in/out transition on a nested view.
Here's a snippet from the LESS file for the fade in transition on the main view:
main {
/* start 'enter' transition */
&.ng-enter {
/* transition on enter for .5s */
transition: .5s;
/* start with opacity 0 (invisible) */
opacity: 0;
}
/* end 'enter' transition */
&.ng-enter-active {
/* end with opacity 1 (fade in) */
opacity: 1;
}
}
Avoid the view name for named-views or id for that element.
For example, if this is your html
<div id="home-page" ui-view="home">
<!-- THIS IS WHERE YOUR TEMPLATE WILL BE LOADED -->
</div>
Instead of:
/*AVOID*/
div#home-page[ui-view="home"].ng-enter {
/*ENTER STYLES*/
}
div#home-page[ui-view="home"].ng-enter-active {
/*...ENTER-ACTIVE-STYLES*/
}
Try:
div[ui-view].ng-enter {
/*...ENTER-STYLES*/
}
div[ui-view].ng-enter-active {
/*...ENTER-ACTIVE-STYLES*/
}
Good Luck.
Like someone said in the post. there is a angular 1.2 branch of the router that has patches that make it work. I know for a fact that using Angular 1.2.6 ng-animate 1.2.6 and my special ui-router build of 0.2.0 beta branch 1.2 works... fading ui-views.. in and out.
the problem is that you need to "build" the beta branch angular router.. you can't just go download a tarball from git and it works.. you have to download it. then BUILD it. then you will have a custom ui-router. look at your ui-router header in javascript. mine says this..
/**
* State-based routing for AngularJS
* #version v0.2.0-dev-2013-10-05
* #link http://angular-ui.github.com/
* #license MIT License, http://www.opensource.org/licenses/MIT
*/
does your's say version 0.2.0-dev-2013-10-05? that date is the date i compiled mine. so your date should be relevant to yours.. if you don't see that in your header of your javascript then you are just using the same 0.2.0 version as the master, you aren't using anything special to make 1.2 animations work...
here is a pastbin of the compiled ui-router that works with 1.2 try it out. BOOM!
0.2.0 Angular-ui-router custom build
In case anyone wanted to use animate.css with Angular and UI-Router, one could simply do this below. Note this was only tested using Angular 1.2.21 and UI-Router 0.2.10.
Example of using FadeInDown as enter animation and FadeOutDown as exit animation. Simply swap the animation name for any animation from animate.css. You may also want to put this in a div container with the position set to relative.
HTML:
<div data-ui-view class="fade"></div>
CSS:
.fade.ng-enter, .fade.ng-leave {
position: absolute;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.fade.ng-enter {
-webkit-animation-name: fadeInDown;
animation-name: fadeInDown;
}
.fade.ng-leave {
-webkit-animation-name: fadeOutDown;
animation-name: fadeOutDown;
}
Another example instead using bounceInDown and bounceOutDown:
HTML:
<div data-ui-view class="bounce"></div>
CSS:
.bounce.ng-enter, .bounce.ng-leave {
position: absolute;
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
.bounce.ng-enter {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
.bounce.ng-leave {
-webkit-animation-name: bounceOutDown;
animation-name: bounceOutDown;
}
EDIT: Made a fork of #kamweti's Plunker to visualize example with animate.css.
Using AngularMotion https://github.com/mgcrea/angular-motion then just add this to your css...
div[ng-view].ng-leave-active {
display: none !important;
}
Add your animation to the class (am-fade in my case) of your ng-view div
How can I enable different transitions with AngularJS. Lets Say, I have a sidebar in my web application. I the user clicks a button X, the sidebar should disappear very fast, if the user clicks another button, the sidebar should disappear slow.
I think, this would work by setting a transition option value after one of that clicks and then changing the visibility state of the sidebar (watched by the transition directive).
But that seems a bit like bad style for me. Is there a common way to do this?
I would do something like this. Set a default transition for the sidebar, and then apply a class with a different transition speed.
Here is a jsFiddle of what I mean:
http://jsfiddle.net/rd13/eTTZj/149/
HTML:
<div ng-controller="myCtrl">
<div class="sidebar" ng-class="{'slide-out':boolChangeClass}">
Sidebar
</div>
<button ng-click="click()">Toggle Sidebar</button>
</div>
Angular:
function myCtrl($scope) {
$scope.click = function() {
$scope.boolChangeClass = !$scope.boolChangeClass;
$scope.$apply();
}
}
CSS:
.sidebar {
-moz-transition: left .1s;
-webkit-transition: left .1s;
-o-transition: left .1s;
transition: left .1s;
width: 100px;
background-color: blue;
position: absolute;
top: 0px;
bottom: 0px;
left: -100px;
}
.slide-out {
-moz-transition: left 1s;
-webkit-transition: left 1s;
-o-transition: left 1s;
transition: left 1s;
left: 0px;
}