Mixing
CSS Transitions: How to 'flash' in and out of a class
CSS Transitions: How to 'flash' in and out of a class
I'm trying to make an element change instantly to a colour when I add a class, then slowly fade out when it's removed. I've achieved this with CSS transitions, like so:
.base {
background-color: #000000;
transition: 1.5s background-color;
}
.base.extra {
transition: 0s background-color;
background-color: #00ff00;
}
This works, BUT only if I add the 'extra' class and then remove it as a separate action...
$('#add').on(
'click',
function(e) {
e.preventDefault();
$('.base').addClass('extra');
}
)
$('#remove').on(
'click',
function(e) {
e.preventDefault();
$('.base').removeClass('extra');
}
)
$('#flash').on(
'click',
function(e) {
e.preventDefault();
$('.base').addClass('extra');
$('.base').removeClass('extra');
}
)
.base {
width:300px;
height: 60px;
background-color: #000000;
transition: 1.5s background-color;
}
.base.extra {
transition: 0s background-color;
background-color: #00ff00;
}
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
<a id=add>Add 'extra' class</a><br/>
<a id=remove>Remove 'extra' class</a><br/>
<a id=flash>Add then remove 'extra' class</a><br/>If you click 'Add...' the block goes green, check.
If you click 'remove...' the block fades to black, check.
If you click 'Add then remove...' nothing changes!
I assume it's not changing the colour in the first instance, so it fades from black to black.
How can I make that third link change it to green, then instantly start fading with CSS transitions?
Note: I'm intentionally not using jQuery animations for this, as running a few dozen of them at one time presented a performance issue.
@TemaniAfif Possibly, I want an instant change followed by a long fade.
– AJFaraday
Jun 29 at 13:16
first are you aware that the event on the jquey is not correct? you ahve twice #remove ?
– Temani Afif
Jun 29 at 13:18
@TemaniAfif Thanks! I hadn't spotted that.
– AJFaraday
Jun 29 at 13:21
2 Answers
2
1st, you have two events for #remove. The other should be #flash. 2nd, it works but it's too fast. Setting timeout (using JavaScript setTimeout()) for 200 milliseconds (=0.2 sec) make the effect visible.
#remove
#flash
setTimeout()
$('#add').on(
'click',
function(e) {
e.preventDefault();
$('.base').addClass('extra');
}
)
$('#remove').on(
'click',
function(e) {
e.preventDefault();
$('.base').removeClass('extra');
}
)
$('#flash').on(
'click',
function(e) {
e.preventDefault();
$('.base').addClass('extra');
setTimeout(function() {
$('.base').removeClass('extra');
}, 200);
}
)
.base {
width: 300px;
height: 60px;
background-color: #000000;
transition: 1.5s background-color;
}
.base.extra {
transition: 0s background-color;
background-color: #00ff00;
}
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
<a id='add'>Add 'extra' class</a><br/>
<a id='remove'>Remove 'extra' class</a><br/>
<a id='flash'>Add then remove 'extra' class</a><br/>200 is not 2 sec but 200 millisecondes
– Temani Afif
Jun 29 at 13:27
@TemaniAfif True, thanks for pointing out!
– IiroP
Jun 29 at 13:28
I used 10 ms in the end, but that's perfect, thank you!
– AJFaraday
Jun 29 at 13:36
You can do this differently. Here is an idea with pseudo element.
.base {
width:300px;
height: 60px;
background-color: #000000;
position:relative;
}
.base:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
background-color: #00ff00;
}
.base:hover::before {
z-index:1;
opacity:0;
transition: 1.5s opacity;
}
The same effect by adding/removing a class. You can rely on transitionend event to remove the class:
transitionend
$('.base').on(
'click',
function(e) {
e.preventDefault();
$(this).addClass('extra').on('transitionend', function () {
$(this).removeClass('extra');
});
}
)
.base {
width:300px;
height: 60px;
background-color: #000000;
position:relative;
}
.base:before {
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
z-index:-1;
background-color: #00ff00;
}
.base.extra::before {
z-index:1;
opacity:0;
transition: 1.5s opacity;
}
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
you need a kind of blink effect ?
– Temani Afif
Jun 29 at 13:15