Why is my nested CSS transition not working? - html

Question

I've got two classes, fade-item and fade. fade is nested in fade-item like this:
<a class="product-item fade-item" (mousemove)="hoverOn(i)" (mouseleave)="hoverOff(i) >
<div class='fade' *ngIf='item.active' >
<button class="botonete botonete--primary botonete--hero-one">
Button Text
</button>
</div>
</a>
When I hover over fade-item with mousemove, a value is set on the item so it shows using *ngIf='item.active', but it is supposed to do an opacity transition, which is not happening.
css code below:
.fade {
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.fade-item:hover {
.fade{
opacity: 1;
}
}
Anyone knows what I am doing wrong?

Answer 1

The code you wrote it's scss. If you are looking for a css answer it should be like this:
.fade {
opacity: 0;
transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-webkit-transition: opacity 1s ease-in-out;
}
.fade-item:hover .fade{
opacity: 1;
}

Answer 2

When an element is dynamically added to the page, its styles are computed at that moment. For your transition to work, you would need it to have been already computed despite not actually existing yet.
Minimal example of it not working:
const elem = document.getElementById('hoverme');
elem.addEventListener('pointerover',e=>{
elem.insertAdjacentHTML('beforeend','<span id="fade">Dynamically added!</span>');
});
elem.addEventListener('pointerout',e=>{
elem.children[0].remove();
});
#fade {
opacity: 0;
transition: opacity 1s;
}
#hoverme:hover #fade {
opacity: 1;
}
<div id="hoverme">Hover me!</div>
Instead, you need to give it an animation that will begin when the element is added to the document.
Example:
const elem = document.getElementById('hoverme');
elem.addEventListener('pointerover',e=>{
elem.insertAdjacentHTML('beforeend','<span id="fade">Dynamically added!</span>');
});
elem.addEventListener('pointerout',e=>{
elem.children[0].remove();
});
#fade {
animation: fade-in 1s both;
}
#keyframes fade-in {
from {opacity:0}
to {opacity:1}
}
<div id="hoverme">Hover me!</div>