I've got a screen in my application that has a side bar of sorts. The screen presets itself to the user with a full screen grid at first, but when a user clicks on a row/add button (A), the grid collapses (B), and then the user sees the details view.
I'd like to tweak this screen visual change event, to have the grid slide into the sidebar state, as apposed to just appearing instantly.
<div>
<!-- SIDEBAR SECTION -->
<div ng-class="resize()">
<table>
<tr ng-repeat="participant in $data" ng-click="open(participant)" >
<!-- code left out for brevity -->
</table>
</div>
<!-- DETAILS SECTION -->
<div ng-if="state != 0" class="col-lg-9">
<div class="row">
<div some-directive>DETAILS</div>
</div>
<hr />
<!-- left out for brevity -->
</div>
</div>
The resize() function returns either col-lg-12 or col-lg-3, depending on the state of the screen
I've achieved the slide animation by just doing this in my CSS
.col-lg-3-add {
-webkit-transition: 0.8s ease-out all;
transition: 0.8s ease-out all;
}
.col-lg-3-remove {
-webkit-transition: 0.5s ease-out all;
transition: 0.5s ease-out all;
}
All of the above works... except that the details section renders instantly before the transition completes, and then my screen "jumps"... which isn't as smooth as I expected.
My question.
How do I get the details section to transition as well. But only after
the sidebar section has completed its transition.
Thing's I've tried that didn't quite work:
Adding a css class to to details with a larger transition delay.
Binding the ng-if of details, to another property that gets toggled after a javascript delay of x seconds. (This works sometimes, but sometime not... not sure what the kicker is thats causing the effects to differ. But out of the two options it seems the most "hackey")
What would be the correct angular way to solve this, and I'm drawing blanks on this...
Related
I have a simple div which has a transition. It transitions from a yellow background to a red one.
<div class="foo" ng-class="{'foo-visible': vm.visible}">
The transition is played once the foo--visible class is added to the div.
This works fine in Chrome, IE...etc.
However once I add a wrapper div around it, the transition stops working in Internet Explorer (tested with IE10).
<div class="foo--wrapper" ng-if="vm.visible">
<div class="foo" ng-class="{'foo--visible': vm.visible}">
</div>
I need to include ngAnimate in this case. Then it works in Chrome, but in IE I immediately get the red div, the transition is never played. No transitionstart (IE only) or transitionend events are fired.
Here's a plunker illustrating the issue:
http://plnkr.co/vpJzudnLxTwoJGZoZaNd
Does anybody have an idea what is causing this?
This plnkr adds two similar boxes to yours. http://plnkr.co/edit/lkyWHu?p=preview
<div ng-if="vm.visible">
<div class="animate-box animate-if">
<h2>Inner Class</h2>
</div>
</div>
<div class="animate-box animate-if" ng-if="vm.visible">
<div>
<h2>Outer Class</h2>
</div>
</div>
The "Outer" works in both IE and Chrome.
Chrome iterates the child animation for "Inner" in a way that makes sense. Internet Explorer, as for your example, does not.
On closing, neither do the child animation because the delay to remove the parent is zero.
An interesting point though, IE and Chrome appear to work the same for the authoritative answer at https://docs.angularjs.org/api/ngAnimate/directive/ngAnimateChildren
The CSS I used was:
.animate-box {
height: 100px;
width: 100px;
background-color: red;
}
.animate-if.ng-animate {
transition: all 3s linear;
}
.animate-if.ng-enter,
.animate-if.ng-leave.ng-leave-active {
background-color: yellow;
opacity: 0;
}
.animate-if.ng-leave,
.animate-if.ng-enter.ng-enter-active {
background-color: red;
opacity: 1;
}
I'm trying to make animated transitions when swapping two divs using ng-show and ng-hide on both. This is currently my code:
<div ng-show="loginToggler === 'register'">
Register
</div>
<div ng-show="loginToggler === 'login'">
Login
</div>
My css partial for animating :
.ng-hide-add { animation:0.5s lightSpeedOut ease; }
.ng-hide-remove { animation:0.5s lightSpeedIn ease; }
Animations are working properly only when the first div is appearing/disappearing. None of suitable transition effects apply on my second div (it works the same way when I swap my divs position in code - only the one which is earlier in my code has the transition effects applied).
Tried with the second div such as ng-hide="loginToggler === 'register'" ? that way both of them will have .ng-hide at the same time when transitioning
Angular's animate-repeat isn't applying the ng-move class when it seems like it should, so I'm confused and unable to create the animation I want.
I'm using ng-repeat with a custom filter to add and remove divs from a horizontal row:
<div id="presidents">
<div ng-repeat="president in presidents | showPresident:this" class="pres animate-repeat" id="{{ president.birth }}" >
<a href="{{ president.url }}" target="_blank">
<img src="{{ president.imageURL }}" alt="{{ president.name }}">
</a>
<p>{{ president.name }}</p>
</div>
</div>
I'm trying to create animations for when the divs are added and removed from the DOM. The Angular docs for ng-repeat state that there are three classes available for this type of animation: ng-enter, ng-leave, and ng-move. I've applied CSS animations to the enter and leave classes so that the divs fade in and out.
.ng-enter {
animation: zoomIn 1s;
}
.ng-leave {
animation: zoomOut 1s;
}
When a div fades in or out, though, the others have to slide into or out of its way and it seems like the ng-move class should be applied while that happens so that I can animate the process, but the class is never applied, so the divs just snap over instead of sliding the way I'd like. I verified that the class is never applied by giving it a red border:
.ng-move {
border: 4px solid red;
}
So, am I misunderstanding ng-move? Why is it not applied to the remaining divs when they re-position themselves?
How do I get these divs to slide over instead of snapping?
The solution I've ended up using is to animate the width and opacity of the elements myself instead of using animate.css. As they shrink in size, the others slide into place. Looks weird with text, but works fine with images. No need for the ng-move class.
I have a wrap, like a console, and inside it i have another div for the background image and the ng-view of angular like this:
< id="wrap">
< class="introPage">
< ng-view class='mainView'> </div>
<end of class>
</endofid>
Im using animate.js library, which gives me this smooth bounceInLeft which occurs in one second:
.mainView.ng-enter {
animation: bounceInLeft 1s;
-webkit-animation: bounceInLeft 1s;
}
.mainView.ng-leave {
animation: bounceOutRight 1s;
-webkit-animation: bounceOutRight 1s;
}
I have a slight problem with the transition itself, the current page bounces off and it seems the second one is bouncing in under it, and once the previous page goes off entirely, the current one just pops up and it's really not the behaviour i expected, what is the cause of this?
For those who don't understand what i mean, it's like when i have 2 divs in a container with a width of 1000px, the left div is width 500px and when the right div is 501px it goes under the left div...
Here is the example page:
http://single.org.il/#/intro
when you click a gender and press go, there is a bounceoutright, and the bounceinleft occurs at the same time, please just see when you remove the overflow-hidden in the #wrap id, the bounceinleft is just beneath the the current page...
I'm trying to get a div container with some text to fade in after the page loaded, but I fail. I was using the ng-animate directive like this:
<div class="motd" style="text-align: center;" ng-init="quote = getQuote();">
<div class="slide-fade" ng-class="animation">
<span class="quote"><i>{{quote.content}}</i></span><br><br>
<span class="author">{{quote.author}}</span>
</div>
</div>
Which obviously does not work, due to the fact that the animation does not get triggered by a click or something like that.
So how do I tell the browser that after the page loaded, it should fade in my text?
I hope you can help me!
Edit: At the date where I asked, I did not know that animations will also trigger when the page has loaded. I always thought there have to be some "user interaction" like a click or something to trigger them.
If you're using bootstrap, you can do this:
<html ng-app="myApp" ng-strict-di>
<head>...</head>
<body ng-init="ngLoaded = true" class="fade" ng-class="{ in: ngLoaded }">
<div>Content</div>
</body>
</html>
It may also work do to it this way as well:
<body
ng-app="myApp"
ng-strict-di
ng-init="ngLoaded = true"
class="fade"
ng-class="{ in: ngLoaded }">
<div> Content </div>
</body>
The fade class has 0 opacity and the in class applies the transition. ngLoaded will become true (in the $rootScope, I believe) as soon as angular has loaded due to ng-init="ngLoaded = true".
I use this so that the page doesn't blip with bits of angular brackets and such while the page loads.
I don't see the problem.
You just want to have animation when the element appears( you can think about it that way right? ).
Basicaly what I would do.
I would use then animate.css
http://daneden.github.io/animate.css/
and I would just add:
class="animated fadeIn"
Or plain css with this animation.
What I like to do is to use delay
.delayedx1{
animation-delay: 0.2s !important;
-webkit-animation-delay: 0.2s !important;
-moz-animation-delay: 0.2s !important;
-o-animation-delay: 0.2s !important;
-webkit-transition-delay:0.2s;
transition-delay:0.2s;
}
x2 x3 x4 or in ng repeat delay directly in "style" based on $index.
One way to do this is to use a flag (like $scope.fade = false;) to indicate that the page has loaded. Then, on your element, you'd use an ng-class with a conditional e.g.
class="animation" ng-class="{'fade-in': fade }"
The actual fade would be handled by CSS.
.animation { opacity:0; transition:all 200ms ease-in-out; }
.animation.fade-in { opacity:1; }
In your case, the fade-in condition could be as simple as ng-class="{'fade-in': quote }" since any truthy value you cause the class to get applied.
Here's a working plunker for you to play around with: http://plnkr.co/edit/ncqEB3PafIWbwv0UH1QG?p=preview