How to APPEND, NOT REPLACE transition value? - css

Say I have got a <div></div>
In stylesheet file I got (in sass)
div
transition: border-color linear 1s
It works fine of course
then I want some of div got height in their transition-property, depends on class, so I got some <div class='changeheight'></div>, and In stylesheet file:
div.changeheight
transition: height linear 1s
and then, only the second transition rule works, the first transition rule suddenly be replaced, or say, got strikethrough in chrome dev tool.
So how can I make these two rules work together?

If you want to transition two properties, you'll have to have them together in a comma separated list, otherwise the last rule will overwrite the previous rules.
I would suggest using specific classes for the different transitions, like .bordered and .changeheight which you can then combine the transition, like so:
.bordered {
transition: border-color linear 1s;
}
.changeheight {
transition: height linear 1s;
}
.bordered.changeheight {
transition: border-color linear 1s, height linear 1s;
}
Alternatively, you can just transition: all linear 1s; to have every animatable property transition smoothly.

Related

How can I classify each comma-separated value of CSS styles so that they can be accumulated?

For example,
I want to make elements like:
<div style="
transition: opacity 250ms linear, background-color 250ms linear;
"></div>
<span style="
transition: opacity 250ms linear, color 250ms linear;
"></span>
, and classify the styles to make them(CSS classes) easy to reuse:
.smooth-opacity-change {transition: opacity 250ms linear;}
.smooth-color-change {transition: color 250ms linear;}
.smooth-background-color-change {transition: background-color 250ms linear;}
; then I could write it:
<div class="smooth-opacity-change smooth-background-image-change"></div>
<span class="smooth-opacity-change smooth-color-change"></span>
But they're exclusive; transition style can have multiple values, however only one transition style can be applied.
How can I solve this problem, or is it discouraged by design?
Thank you for your comment, Marvin. Unfortunately, it seems that CSS still have a long way to go. I wish someday we could experience the evolution of web styling.
Some years ago this has been asked already (Adding transition to a different property) and I'm afraid there is not yet another solution than writing down all possible combinations of transition-properties. Could be simplified to a few lines by using a pre-processor but the CSS would be the same in the end. -- Marvin
/* Writing down all possible combinations of transition-properties */
.smooth-transition {transition-duration: 250ms; transition-timing-function: linear}
.opacity-transition {transition-property: opacity}
.background-color-transition {transition-property: background-color}
.opacity-transition.background-color-transition {transition-property: opacity, background-color}

Is it possible to exclude a property from a transition style? [duplicate]

Yesterday I got my problem solved about jquery, which didn't load correctly. Today I struggle with yet another problem: two transitions for one element. The first transition starts when the page has loaded: it fades in. This one actually works when I do not use my second transitions. My second transitions must start whenever someone hovers over the ul. The problem is that the hover transitions 'overwrites' the fade-in transition. My jsFiddle:
http://jsfiddle.net/2cpX6/6/
Thanks in advance.
CSS rules with the same name override each other, just like any other rule.
Try this:
transition: opacity 2s ease-in, color 0.3s ease-in-out;
Note that you only need transition and -webkit-transition, since Firefox and Opera now fully support the unprefixed version, and -ms-transition never existed.
You can't put the same CSS rule for the same ruleset without it being overwritten. This applies to everything. For example, if you had:
span {
color: red;
color: green;
}
The spans would be green. This means that you cannot stack transition rules for the same ruleset.
You can create multiple separate transition rules using a comma.
transition: opacity 2s ease-in, color .3s ease-in-out;
http://jsfiddle.net/ExplosionPIlls/2cpX6/7/

Blur out an image then back to normal state

I'm seeing if there is a way to blur out your background for a few seconds then have it come into view. I was trying to play around with the blur attribute and the transition attribute but I was not getting the results I was getting. I tried something like this on my css
body{
background:black;
-webkit-filter: blur(10px);
}
.body{
margin:0 auto;
width:95%;`enter code here`
clear:both;
transition:body 2s ease-in-out;
}
Any suggestions?
Presumably you don't have a class named "body" so the period in your second selector is an error. Also, you have the syntax wrong for transition. The first value is the property to transition, not a selector. And, depending on the level of support you require, you need vendor prefixes on both the transition property and the property being transitioned, e.g.
body {
-webkit-transition: -webkit-filter 2s ease-in-out;
}
BTW, I'm not sure if -filter is an animatable property.
Fiddle: http://jsfiddle.net/Bushwazi/sHL9m/3/
1) Use all in the transition
2) Despite what the prefixes lead you to believe, this didn't work in all browsers
3) But it did work the same for backgrounds and img
I change a class using javascript, css handles the rest.
.filter {
filter:blur(10px);
-webkit-filter:blur(10px);
-moz-filter:blur(10px);
-o-filter:blur(10px);
-ms-filter:blur(10px);
-webkit-transition: all 5.0s linear 1.0s;
-moz-transition: all 5.0s linear 1.0s;
-ms-transition: all 5.0s linear 1.0s;
-o-transition: all 5.0s linear 1.0s;
transition: all 5.0s linear 1.0s;
}
.filter.animae {
filter:blur(0px);
-webkit-filter:blur(0px);
-moz-filter:blur(0px);
-o-filter:blur(0px);
-ms-filter:blur(0px);
}
.bg {
display:inline-block;
width:360px;
height:424px;
background:url(http://gruntjs.com/img/grunt-logo.svg);
}

Fade in fade out on image hover using CSS3?

I was wondering if it was possible to state an unhover class at all on an image?
What I am trying to achieve is when someone hovers over an image it will fade in and then when they unhover it fades back out?
Heres my code, I got the fade in to work when someone hovers over an image but I need it too fade out when they unhover... hope this made sense.
http://jsfiddle.net/L7XCD/
This should work for you! http://jsfiddle.net/L7XCD/1/
Let's use the great mozilla documentation to explain this:
Transition rovide a way to control the speed of animation changes to CSS properties. Instead of having the animation changes take effect instantly, you can transition the property changes over a specified time period.
Also we used the transition timing functions (ease, linear, easy-in, easy-out, easy-in-out)
Timing functions determine how intermediate values of the transition are calculated. The timing function can be specified by providing the graph of the corresponding function, as defined by four points defining a cubic bezier
CCS markup:
img {
opacity: 0.6;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
img:hover {
opacity: 1.0;
transition: opacity .55s ease-in-out;
-moz-transition: opacity .55s ease-in-out;
-webkit-transition: opacity .55s ease-in-out;
}​
Since he was using the transition ease-in-out, I thought it was better to use the same transition function.
For more information, check the documentation here
Hope it helps!
http://jsfiddle.net/L7XCD/2/
Just add the transition effect to your element without the hover-tag

Using undefined number of arguments in mixins

I currently have -webkit specific attributes in my Less CSS sheet, I am trying to update them with mixins to add -moz attributes, like this:
.transition(#1) {
-webkit-transition: #1;
-moz-transition: #1;
}
div {
.transition(all .5s);
}
The example above works fine, however I also have things like that:
div {
-webkit-transition: border-color .3s, background .3s;
}
And I can’t call the mixin as .transition(border-color .3s, background .3s) because it has more arguments than defined in the mixin. So what I am doing at the moment is this:
.transition(#1) {
-webkit-transition: #1;
-moz-transition: #1;
}
.transition-2(#1, #2) {
-webkit-transition: #1, #2;
-moz-transition: #1, #2;
}
div {
.transition-2(border-color .3s, background .3s);
}
This is annoying, I need to add redundant code in my sheet any time I’m using a number of arguments not previously used before; and I have this problem with others CSS3 properties too, for example box-shadow when I need to add inset at the beginning.
Is there any way to declare mixins flexible in their number of arguments with Less, just like CSS3 properties are?
For this case, the redundant mixin code can be avoided using any one of the below mentioned options.
Option 1: (Simplest solution - thanks to seven-phases-max for highlighting the miss)
We can use semi-colon as a separator/delimiter for arguments and when we add a semi-colon at the end after specifying all properties that need to be transitioned (in a comma separated format), the whole part before it would be considered as one single argument.
Extract from the official Less website:
Using comma as mixin separator makes it impossible to create comma separated lists as an argument. On the other hand, if the compiler sees at least one semicolon inside mixin call or declaration, it assumes that arguments are separated by semicolons and all commas belong to css lists
.transition(#1) {
-webkit-transition: #1;
-moz-transition: #1;
}
div{
.transition(border-color .5s, background .3s, color .3s;);
}
So the above code when compiled would result in
div {
-webkit-transition: border-color 0.5s, background 0.3s, color 0.3s;
-moz-transition: border-color 0.5s, background 0.3s, color 0.3s;
}
Option 2:
Pass the input values to the mixin (how many ever specific properties need to be transitioned) within quotes. Within the mixin, use the ~ or the e() in-built functions to strip the quotes.
.transition(#1) {
-webkit-transition: ~"#{1}";
-moz-transition: ~"#{1}";
}
div {
.transition("border-color .5s, background .3s");
}
div#sample2 {
.transition("border-color .3s, background .3s, color .3s");
}
will produce the below CSS when compiled
div {
-webkit-transition: border-color .5s, background .3s;
-moz-transition: border-color .5s, background .3s;
}
div#sample2 {
-webkit-transition: border-color .3s, background .3s, color .3s;
-moz-transition: border-color .3s, background .3s, color .3s;
}
Option 3:
Less does allow creation of mixins which allow/accept variable number of inputs using the ... option. Hence you can use the same mixin as in your original code by adding the ... to the input variable and calling it as you had originally wanted.
.transition(#args...) {
-webkit-transition: #args;
-moz-transition: #args;
}
div {
.transition(border-color .5s, background .3s);
}
The above will compile successfully but the only problem is that it would produce the below output when compiled. As you can see, the problem is that the parameter values are space separated and not comma separated (as they should be for the CSS to work properly).
div {
-webkit-transition: border-color 0.5s background 0.3s;
-moz-transition: border-color 0.5s background 0.3s;
}
Ofcourse we could write complex replace functions using regular expressions but that would really make the code messy. Instead we could use loops and some built-in functions to achieve the required output (like shown below).
.transition(#args...) {
.loop-args(#argCount) when (#argCount > 0) {
.loop-args(#argCount - 1);
#arg: extract(#args, #argCount);
-webkit-transition+: #arg;
-moz-transition+: #arg;
}
.loop-args(length(#args));
}
div {
.transition(border-color .5s, background .3s, color .3s);
}
Basically what we are doing is use the ... to accept multiple arguments as input to the mixin and then loop over each argument and add it to the CSS property's value. The +: (merge function introduced in Less v1.5.0) is used to produce the comma separated output.
When compiled, it would produce the below output:
div {
-webkit-transition: border-color 0.5s, background 0.3s, color 0.3s;
-moz-transition: border-color 0.5s, background 0.3s, color 0.3s;
}
You could try
.transition(#1) {
-webkit-transition: #1;
-moz-transition: #1;
}
.transition-2(#1, #2) {
.transition(#1); // this includes all the stuff from transition(#1)
color:red; // additional stuff
}
As for your actual question, I dont believe that LESS itself has any sort of "rest" style arguments passing.

Resources