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...
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;
}
CSS
.hover-div{
position:absolute;
margin-top:-150px;
visibility:hidden;
transition:all 0.5s linear 0s;
}
.team_hover:hover + .hover-div {
margin-top:0px;
visibility:visible;
}
.hover-div:hover {
margin-top:0px;
visibility:visible;
}
.slide-hidden{
visibility:hidden !important;
transition:all 0.5s linear 0s;
}
Here when mouse over the yellow box. another slide will comes from top. That slided div contain team names. I need to slide back the div when click on one team name. Now its just hide only(ie no slide animation). I need slide effects.
Plunker
Instead of relying on :hover, you should add/remove a class on ng-mouseover and ng-mouseleave. I have made a quick edit to your plunker here: http://plnkr.co/edit/niHQfuDxxV1bv1gcPL73?p=preview
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
I'm using animate.css to do some animations on my site, but i want a certain animation to occur right after the other one ended, for example i have this css:
.pageRenderer.ng-enter{
animation: fadeIn 1s;
}
.pageRenderer.ng-leave{
animation: bounceOutLeft 1s;
}
And this simple html:
<div ng-repeat='page in pages' style='position:relative'>
<div ng-if="$index == pageToShow" class='pageRenderer'>
<h2>{{page.title}}</h2>
<div ng-repeat='quest in page.quests'>
<div ng-switch on="quest.ui.type">
<div ng-switch-when="ms-select-single" >
<div ms-select-single quest='quest'></div>
</div>
...
</div>
</div>
</div>
When i turn to next page (I have a button that does it), i want first to my ng-leave to do it's job and leave, and only than do the enter, not simultaneously...
Is it possible without any use of angular at all? if not, What are to be my options?
You can try different solutions:
add a delay to the ng-leave class
animation-delay: 1s;
put your animations when ng-enter is active and ng-leave is active (not sure about this solution, I usually use transitions and not animations, but give it a try)
.pageRenderer.ng-enter.ng-enter-active {
animation: fadeIn 1s;
}
.pageRenderer.ng-leave.ng-leave-active {
animation: bounceOutLeft 1s;
}
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...