Here's a plunker of the phenomenon: http://plnkr.co/edit/xLfXyDcwKtHPM7Sdhygf?p=preview
Ignore the hideous layout; the problem is evident when you click "log in" - the FadeOutDown animation fires, the div dutifully proceeds towards the bottom of the page, but just as the animation ends it reappears briefly in its original position.
I'm very new to the whole webdev game, so I'm unsure if this problem is to do with ngAnimate, ui-router, or the way I'm using ng-enter/ng-leave in the CSS. I'd obviously like for the div to remain gone once it's faded out of view.
My approach is to trigger a transition via an ui-sref, then animate the transition with this kind of CSS
[ui-view].ng-leave #first-div {
animation: fadeOutDown 1s;
}
And so forth for the other divs. It technically works but has this weird artifact at the end of the animation period.
Any ideas? Thanks!
you can use that:
[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;
/*padding-left: 0px;*/
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
}
[ui-view].ng-leave-active {
opacity: 0;
/*padding-left: 100px;*/
-webkit-transform:translate3d(100px, 0, 0);
-moz-transform:translate3d(100px, 0, 0);
transform:translate3d(100px, 0, 0);
}
http://plnkr.co/edit/i9wHL9dNbV55EKZr06dn?p=preview
You can just add.
Documentation: https://docs.angularjs.org/api/ngAnimate#css-based-animations
[ui-view].ng-leave-active {
opacity: 0;
}
Related
I am new to web development Trying to create a sliding page in angular ng-view but its not working as expected when the page two is entering its displaying below the page one till page one is available.please see the code here.
.slide.ng-enter{
transition-duration: 500ms;
transform: translateX(100%);
}
.slide.ng-enter-active{
transform: translateX(0%);
}
.slide.ng-leave{
transition-duration: 500ms;
transform: translateX(0%);
}
.slide.ng-leave-active{
transform: translateX(-100%);
}
I also need to make the page one slide from left to right.Can someone help me on this
I have added position: absolute to .slide. If that is acceptable in the project you are working then the below solution works fine. Please check the updated plunker.
.slide {
top: 0;
position: absolute;
width: 100%;
}
https://plnkr.co/edit/qC0YS2Gj3ddiNvuhjKzV?p=preview
I've been trying to get a sequence of two animations running but I'm getting really annoyed as I just can't make it work! I need to fade a div in and then slide it to the right. Fade in is easy using:
.fadein.ng-hide-remove {
animation: 0.8s appear;
display: block!important;
}
.fadein.ng-hide-remove.ng-hide-remove-active {
opacity:1;
}
#keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
and
<div id="settings" ng-show="settingsPanel" class="fadein"></div>
and
$scope.showSettings = function(){
$scope.settingsPanel = true;
}
Settings looks like this:
#settings {
background:#353734;
position:fixed;
top:0;
bottom:0;
left:-280px;
width:500px;
z-index:100;
}
I've completed sliding too in a similar way but to get them to trigger one after the other is proving impossible for me. Could someone show me how to do this please?
How about using keyframes as follows:
#settings {
background:#353734;
position:fixed;
top:25px;
bottom:0;
left:0px;
width:200px;
z-index:100;
}
.fadein.ng-hide-remove {
animation: 2.8s appear;
display: block!important;
}
#keyframes appear {
0% {
left: -100px;
opacity: 0;
}
50% {
left: -100px;
opacity: 1;
}
100% {
left: 0;
opacity: 1;
}
}
See working fiddle here:
http://jsfiddle.net/HB7LU/20650/
Why not set keyframes up for animations and simply set different stages for each animation. Bit like this
#keyframes slide-right {
0% {
left: -450px;
}
100% {
left: 0;
}
}
I want to update the data shown by a Directive using an animation:
slide old information off downwards;
while offscreen, change the data to be shown (I also presumably need to change the translateY from +100% to -100% at this stage)
slide the new content form above.
My approach is below, but it relies upon a $timeout. I have calibrated as best I can for my development machine but it is not always reliable, and leads to erratic visual effects. There must be a better way, such the second animation only starts when it is signalled that the first is complete?
This is my html
<div class="selectedRestoContainer divider">
<resto-elem
id="selectedResto"
resto="list.selectedResto"
idx="list.selectedIndex"
ng-class="list.animationClass"></resto-elem>
</div>
This is my css
.selectedRestoContainer {
$height : 65px;
height: $height;
overflow: hidden;
resto-elem {
min-height: $height; //
transform: translateY(-100%); // ensure that without .flash element is off screen
}
.flash-add { // start - off-screen above
transform: translateY(-100%);
transition: all 0.7s ease; // incoming - i.e. transition to 0
}
.flash, .flash-add.flash-add-active {
transform: translateY(0);
}
.flash-remove.flash-remove-active {
transform: translateY(100%);
transition: all 0.4s ease; // outgoing
}
}
And this is what I have in my controller
$scope.$on("selectedResto", (e, qname) => {
// start first animation (400ms set in css)
$timeout( () => this.animationClass = "", 0 );
// second animation starts 450ms later
$timeout( () => {
this.selectedIndex = qname;
this.selectedResto = this.recs[qname];
this.animationClass = "flash";
}, 450);
});
I have simply included the ngAnimate module, and now my ng-show elements are being animated when shown. Which is great.
But, the animation takes 1s (I think), how can I configure this to be another value, eg. .2s?
It's done in the CSS (to adapt to your solution):
.animate-enter {
-webkit-transition: 2s linear all; /* Chrome */
transition: 2s linear all;
opacity: 0;
}
.animate-enter.animate-enter-active {
opacity: 1;
}
You have to manage animation timing from your css
.sample-show-hide {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
I've got something working (animation) but it doesn't look pretty.
When the animation/slide is triggered. The "leaving" slide pops to the left of the screen and hugs the "entering" slide.
It also overshoots the endpoint during animation then snaps back. My ng-animate css is as follows:
css :
.slide-leave, .slide-enter {
-webkit-transition: 5s linear all; /* Safari/Chrome */
-moz-transition: 5s linear all; /* Firefox */
-o-transition: 5s linear all; /* Opera */
transition: 5s linear all; /* IE10+ and Future Browsers */
/* The animation preparation code */
opacity: 0.5;
}
.slide-enter {
position: relative;
left: -100%;
}
.slide-enter.slide-enter-active {
left: 0;
opacity: 1;
}
.slide-leave {
opacity: 1;
}
.slide-leave.slide-leave-active {
position: relative;
opacity: 0;
left: 100%;
}
Here's a semi-working plunkr. Notice the "leaving" view hugs the "entering" view. You can get the animation started by pressing the black square in the header.
http://plnkr.co/edit/FG44cpJ65S4Gr6QZpm1X?p=preview