What could be causing the lack of functionality in my nested CSS transition?

Question

What could be causing the lack of functionality in my nested CSS transition?

My markup includes two classes, fade-item and fade. The fade class is nested within the fade-item class as shown below:

<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 hovering over the fade-item element with the mousemove event, a value is set on the item causing it to display using *ngIf='item.active', but the expected opacity transition is not taking place.

The CSS code for this scenario is provided 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;
     }
 }

I am having trouble figuring out what I might be doing wrong. Can anyone offer some insight?

html css sass

Answer 1

Answer №1

Your script is written in SCSS format. If you need a CSS solution, it would appear as follows:

.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

Your script is written in SCSS format. If you need a CSS solution, it would appear as follows:

.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 3

Answer №2

When a new element is added to the page dynamically, its styles are calculated at that exact moment. In order for your transition effect to take place smoothly, it needs to have been pre-calculated even before the element actually exists.

Here's a simple example where this approach doesn't work as expected:

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 should apply an animation that triggers once the element is added to the document.

For instance:

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>

Answer 4

When a new element is added to the page dynamically, its styles are calculated at that exact moment. In order for your transition effect to take place smoothly, it needs to have been pre-calculated even before the element actually exists.

Here's a simple example where this approach doesn't work as expected:

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 should apply an animation that triggers once the element is added to the document.

For instance:

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>

What could be causing the lack of functionality in my nested CSS transition?

Answer №1

Answer №2

Similar questions

Why isn't the AngularJS injected view resizing to fit the container?

Is there a way to hide the thumbnail image when the title is hovered over without using CSS?

Prevent vertical scrolling only on mobile devices while allowing horizontal scrolling

Enhance the appearance of rows in a table by adding a captivating marquee effect to those with

Prevented a frame from "https://googleads.g.doubleclick.net" from accessing another frame

The Google map is not appearing when placed within the "row" class

Sustaining the hover effect background color when hovering over submenu options

Various Overlay Shapes in Bootstrap Using CSS

CSS based on conditions for 2 specific divs

Troubleshooting the problem of keyframes chaining animation in React animations

Tips for displaying two input decorations in Material UI beside one another within a text field

The <mat-radio-button> component does not have a value accessor specified

What is the process for showing a table based on a selected value?

Command field in Javascript

I require assistance in implementing a button for executing this specific HTML code

Why Changing the Width of a Flexbox Container Doesn't Impact Its Children?

Having trouble saving textarea content to a file with php?

Activate when every single pixel within an element is see-through

Tips for resizing all HTML elements when adjusting browser window dimensions

When clicking on the side-bar, it does not respond as expected