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
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'm loading different pictures with AngularJS and I have the following keyframes:
#keyframes backgroundMoving {
from {
background-position: 0 0;
}
to {
background-position: 638px 500px;
}
}
It's used by:
.moving-bg {
-webkit-animation: backgroundMoving 0s linear infinite;
-moz-animation: backgroundMoving 0s linear infinite;
-o-animation: backgroundMoving 0s linear infinite;
animation: backgroundMoving 0s linear infinite;
}
I'd like to update the background-position (i. e. 638px 500px) dynamically based on the image selected with angular. The images can be any size since they are uploaded by the user.
Is it possible to performed this in an angular controller? I used to play with ng-class and ng-style but I have no idea how to manage #keyframes.
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;
}
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 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;
}