I am trying to generate animation delays with LESS. The final result should be similar to:
[data-animation-delay="1"] {
animation-delay: .5s;
}
[data-animation-delay="2"] {
animation-delay: 1s;
}
My code looks like:
#animation-delays: 10;
#animation-delay-step: .5; // delay in seconds
.animation-delays-loop (#i) when (#i > 0) {
[data-animation-step="#{i}"] {
#animation-delay = #animation-delay-step * #{i};
animation-delay: #animation-delay~"s";
}
.animation-delays-loop(#i - 1);
}
.animation-delays-loop (#animation-delays);
However, it doesn't work. The problem seems to be in animation-delay: #animation-delay~"s";. Any ideas how to correct it?
OK, I ended up with doing this:
#animation-delays: 10;
#animation-delay-step: .5; // delay in seconds
.animation-delays-loop (#i) when (#i > 0) {
[data-animation-step="#{i}"] {
#animation-delay: #i * #animation-delay-step;
animation-delay: ~"#{animation-delay}s";
}
.animation-delays-loop(#i - 1);
}
.animation-delays-loop (#animation-delays);
worked like a charm.
Related
I have a menu form. To add and remove items from this menu, I use React Transition Group
ReactJS:
<TransitionGroup>
{
menu.map(meal =>
<CSSTransition
key={meal.id}
timeout={500}
classNames="meMeals"
>
<Meal meal={meal} deleteFromMenu={deleteMealFromMenu}/>
</CSSTransition>
)
}
</TransitionGroup>
CSS:
.meMeals-enter {
opacity: 0;
transform: translateY(-30px);
}
.meMeals-enter-active {
opacity: 1;
transform: translateY(0);
transition: all 500ms ease-in;
}
.meMeals-exit {
opacity: 1;
transform: translateY(0);
}
.meMeals-exit-active {
opacity: 0;
transform: translateY(-30px);
transition: all 500ms ease-in;
}
and I am completely satisfied with the behavior of the menu items.
Now I want the background element (grey) as well as the add button to move smoothly as the menu item appears or disappears. How can i do this?
I solved the problem by writing a method that is not directly related to the TransitionGroup, but works in parallel. I also set my window:
transition: 0.5s;
whatever the animation
Now I call this method every time the list changes....
function replaceMenuSize(value) {
const menuSize = menuEditorRef.current.getBoundingClientRect().height
if (value > 0) {
menuEditorRef.current.setAttribute("style", "height: " + (menuSize + 41) + "px")
} else {
menuEditorRef.current.setAttribute("style", "height: " + (menuSize - 41) + "px")
}
}
I am trying to create a bunch of animations that should be calculated.
I am omitting the actual calculation of those animations here as they are not relevant.
The problem I am having is in producing the correct #keyframes constructs.
here is my stripped back less:
.Entry(#animCount, #frameResolution)
{
.CreateAnim(#animNum) when (#animNum =< #animCount)
{
#keyframesname: ~'MyAnimation-#{animNum}';
.frame(#frame) when (#frame =< 100%)
{
#{frame}
{
hello1: #frame;
hello2: #animNum;
}
// .frame( ((#frame + #frameResolution)) );
}
#keyframes #keyframesname {
.frame(0%);
}
.CreateAnim(((#animNum + 1 )));
}
.CreateAnim(1);
}
and this is how it might be called:
.Entry(3, 50%);
I'm compiling it like so:
lessc -m=strict-legacy bug.less bug.css
I expected output such as this:
#keyframes MyAnimation-1 {
0% {
hello1: 0%;
hello2: 1;
}
}
#keyframes MyAnimation-2 {
0% {
hello1: 0%;
hello2: 2;
}
}
#keyframes MyAnimation-3 {
0% {
hello1: 0%;
hello2: 3;
}
}
But in fact MyAnimation-1 also contains all the keyframes from MyAnimation-2 and MyAnimation-3, while MyAnimation-2 contains also contains all the keyframes from MyAnimation-3
Is this a bug in less, or have I done something wrong?
$lessc --version
lessc 3.9.0 (Less Compiler) [JavaScript]
I'm currently working on a SASS for loop to loop over nth images(50 for example). For every nth-of-type I'd like to increase the transition delay by 50ms. The starting point is 250ms and it seems that the for loop I currently have in the works is not incrementing by 50ms and remains at 250ms at all times.
$time: 250ms;
#for $i from 1 through 50 {
img:nth-of-type(#{$i}) {
transition-delay: $time(#{$i}) + 50ms;
}
}
If anyone has any suggestions or could lend a hand, that would be greatly appreciated. Thank you in advance.
If you're going to use a mixin, you can use a default argument
#mixin transitionDelay($default: 200) {
#for $i from 1 through 50 {
&:nth-of-type(#{$i}) {
transition-delay: #{($i * 50) + $default}ms;
}
}
}
Then include it with an argument...
.cool { #include transitionDelay(200); }
or without
.cool { #include transitionDelay; }
$time: 250;
#for $i from 1 through 50 {
img:nth-of-type(#{$i}) {
$itemType: $time + ($i - 1) * 50;
transition-delay: #{$itemType}ms;
}
}
You could probably achieve the same without a helper variable, but I think it makes things cleaner.
I changed some of the logic to accommodate my needs but here's a revised version of my loop.
#mixin transitionDelay {
#for $i from 1 through 50 {
&:nth-of-type(#{$i}) {
transition-delay: #{$i * 45}ms;
}
}
}
In fact I have almost successs:
I have a div needed to bounce :
<div class="container">
<div class="flipcard transition allowhover">
<h1>This is card</h1>
</div>
</div>
then I use css3 animate to achieve bounce effect:
.container{
width: 100%;
height: 100%;
-moz-perspective: 1000px;
}
.flipcard{
background: red;
width: 200px;
height: 300px;
position: absolute;
top: 40px;
left: 20px;
-webkit-transform-style: preserve-3d;
-webkit-transition:all 0.6s ease-in-out;
}
.allowhover:hover{
-webkit-animation-name: bounce;
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite ;
-webkit-animation-direction: normal;
}
#-webkit-keyframes bounce {
25% {
top:7px;
}
45% {
top:40px;
}
64% {
top:19px;
}
76% {
top:40px;
}
96%{
top: 25px
}
100% {
top:40px;
}
}
now the online example is here :http://jsfiddle.net/GEEtx/
It seems work, but not good enough,how should I set the key-frames parameter to make it bounce more like a ball?Is there a formula to calculate the bounce height and countaccording to the element's width and height, or the time?
With little trial and error we can figure out the bounce effect as needed.
There is this formula that is used in all jQuery easing plugins to get the bounce effect.
easeInBounce: function (x, t, b, c, d) {
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b;
},
easeOutBounce: function (x, t, b, c, d) {
if ((t/=d) < (1/2.75)) {
return c*(7.5625*t*t) + b;
} else if (t < (2/2.75)) {
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
} else if (t < (2.5/2.75)) {
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
} else {
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
}
// t: current time, b: begInnIng value, c: change In value, d: duration
So applying this to current CSS keyframes.
d : the animation duration. //1.5 : 1500
b : top value at the start // 0
c : change in value //40px
t : Current time // 10
With some more work on it by applying these we might find out the values needed for the bounce effect in CSS.
I also found this CSS3 3D Bouncing Ball tutorial
Hope that might help you.
Without JQuery.
I have the following code but it will only work on one click. It will not be able to be used twice:
#-moz-keyframes lulse {
0%{
-moz-transform:scale(1);
}
20%{
-moz-transform:scale(1.5);
}
100% {
-moz-transform:scale(1);
}
}
.pinto {
-moz-animation-name: lulse;
-moz-animation-duration: .2s;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function: linear;
-moz-animation-direction: normal;
}
Javascript:
onclick="changeClass(this.id);
function changeClass(a)
{
document.getElementById(a).className += "pinto";
}
Hmm, on the surface it looks like you should be able to remove the class at the beginning of your click handler if it exists. Specifically:
function changeClass(a) {
var elementA = document.getElementById(a);
var regEx = new RegExp('(\\s|^)pinto(\\s|$)');
elementA.className = elementA.className.replace(regEx,' ');
elementA.className += " pinto";
}
This will remove the class and reapply it, which should restart the effect.