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

How can I stop columned-DIVs from wrapping on the webpage?

Why does the styling of the inner Span adhere to the style of the outer Span?

Manipulate sibling elements using jQuery's addClass and remove methods

Is there a way to determine the bounding rectangle of a specific word within a paragraph when you only have its index?

Extracting information from a checkbox list displayed within an HTML table

What is the best way to incorporate a unique font with special effects on a website?

I am dealing with a set of divs wrapped in a flex container that tend to overlap each other. Their heights vary and sometimes they wrap multiple times. Any suggestions on how to prevent this

Tips for styling React Material-UI list items with fontAwesome icons and Tailwind.css

Center the text within a span element in an inline-block container

Clicking on the overlay does not close the bootstrap collapsed toggle

Fetching large images with "fill" layout in NextJS

How do you specifically apply an Inset Border Shadow to just two sides using CSS?

Issue with pop-up functionality on web page using HTML, CSS, and JavaScript

Issues with internal linking in TYPO3 are causing anchor tags to malfunction

Tips for Keeping Footer Aligned with Content:

The auto-play feature fails to function on iPhone devices when using Reactjs

Tips for automating file uploads in HTML

The enchanting world of CSS background scrolling animations

What is the process for adjusting the width of an element using JavaScript?

Interactive menu backdrop determined by div element