I think I maybe totally misunderstanding this.
But say I have this repeating css code.
.dot_one {
animation: dot_one 2s infinite linear;
}
.dot_two {
animation: dot_two 2s infinite linear;
}
.dot_three {
animation: dot_three 2s infinite linear;
}
Shouldn't I be able to extract it as a function like? (but a mixin in stylus)
dot_mix(myVar)
animation: myVar 2s infinite linear;
dot_mix(.dot_one)
I think this is the syntax your after
dot_mix(sel)
{sel}
animation: dot_one 2s infinite linear
dot_mix('.dot_one')
dot_mix('.dot_two')
Obtained from here http://www.miniarray.com/use-variables-for-selectors-in-stylus/
Related
I'm trying to make some element blink in css, under React/material-ui, using withStyle.
The syntax from this post looks nice:
https://stackoverflow.com/a/48320520/9316077
.blink {
animation: blinker 1s step-start infinite;
}
#keyframes blinker {
50% {
opacity: 0;
}
}
I simply tried the following:
'#keyframes blinker': {
'50%': {
opacity: 0,
},
},
'& .blink': {
animation: '$blinker 1s step-start infinite',
},
Adding the $ before blinkerbased on this issue:
https://github.com/mui-org/material-ui/issues/13793
But this crashes my webpage. Any idea? Thanks!
Keyframes name is generated since JSS core v10 so depending on which version you are using you need to use $ when you are referencing a scoped name or without when name/id is global.
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'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.
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.