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.
Related
I'm writing and app and ngAnimate stopped working at some point. I'm trying to debug it and cut down my app to this very minimal example where there's nothing more happening than animation when pushing a button. Still, I can't find out why it's not working. I'm injecting the ngAnimate as it's supposed to and I also have script-tag to include the source.
var searchApp = angular.module('searchApp', ['ngAnimate'])
http://plnkr.co/edit/ZJIF6BGs0ORr3S6YnJwG?p=preview
Anyone can see what I'm doing wrong? It must be some very obvious thing because the app is now so simple... spent hours trying to see it.
The issue is with your CSS not with Angular.
Here's a working version
Problem one is that .testiDiv .ng-hide is not valid in this situation, it implies that you're expecting .ng-hide to be within .testiDiv rather than on it.
Problem two is that the animation was on the wrong class, it should be related to the animation classes Angular automatically applies on elements using ng-show / ng-hide.
.testiDiv {
background-color: black;
width: 100px;
height: 100px;
opacity: 1;
}
.testiDiv.ng-hide {
opacity: 0;
}
.testiDiv.ng-hide-add, .testiDiv.ng-hide-remove {
-webkit-transition:all 1s linear;
-moz-transition:all 1s linear;
-o-transition:all 1s linear;
transition:all 1s linear;
}
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'm working on a kind of a big AngularJS project. After updating Google Chrome to version 33.0.1750.117, ng-show makes the whole page to blink. I mean, when it becames true, before the div becames visible (even if it's a small div) the whole page blinks. And in many cases it blinks every time I toggle ng-show between true and false (with a toggle button).
Before the update it worked just fine. In firefox and Opera it still works as it should.
I tried with ng-cloak but I think is has nothing to do.
BTW, I'm using ng-animate. This is the code:
.animate_fade {
-webkit-transition: linear 0.2s all;
-moz-transition: linear 0.2s all;
-ms-transition: linear 0.2s all;
-o-transition: linear 0.2s all;
transition: linear 0.2s all;
}
.animate_fade.ng-hide-add,
.animate_fade.ng-hide-remove {
display:block!important;
}
.animate_fade.ng-hide-add {
opacity:1;
}
.animate_fade.ng-hide-add-active {
opacity:0;
}
.animate_fade.ng-hide-remove {
opacity:0;
}
.animate_fade.ng-hide-remove-active {
opacity:1;
}
Any clue?
Thanks in advance,
Bruno.
instead ng-show use ng-if. ng-if will bound HTML based on condition so there wont be any issues.
I have used the example on
http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html
I am able to get the animations to work. But I would like to ONLY have the leave animation. Is there a way to do it? I have tried to get rid of the .repeat-item.ng-enter in my css, unfortunately did not work. Any insights?
Thanks!
My Javascript:
<tr ng-repeat="item in m.itemList" class="repeat-item">
My CSS:
.repeat-item.ng-enter,
.repeat-item.ng-leave {
-webkit-transition:1s linear all;
transition:1s linear all;
}
.repeat-item.ng-enter,
.repeat-item.ng-leave.ng-leave-active {
opacity:0;
}
.repeat-item.ng-leave,
.repeat-item.ng-enter.ng-enter-active {
opacity:1;
}
My updated CSS:
.repeat-item.ng-leave {
-webkit-transition:1s linear all;
transition:1s linear all;
}
.repeat-item.ng-leave.ng-leave-active {
opacity:0;
}
.repeat-item.ng-leave{
opacity:1;
}
In my updated CSS, I got rid of anything related to ng-enter but still got the animation for entering.
For me It's working !
here is a working example
.repeat-item.ng-leave {
-webkit-transition:1s linear all;
transition:1s linear all;
}
.repeat-item.ng-leave.ng-leave-active {
opacity:0;
}
.repeat-item.ng-leave{
opacity:1;
}
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