Text gently appearing and disappearing within a block

Question

Text gently appearing and disappearing within a block

I’m looking to create a smooth fade effect for the content inside a block that is being dynamically changed by script. Instead of an instant change, I want the old content to fade out and the new content to fade in gradually without using jQuery — just pure JS and CSS. Here’s what I’ve tried: I defined two classes in CSS, one with transparency and one without, each with a transition set to 2 seconds. My plan was to toggle these classes when the content changes, expecting a smooth fade-out and fade-in effect. However, the content simply changes instantly. CSS:

.non-opaque {
    opacity:0;
    transition: opacity 2s linear;
}
.opaque {
    opacity:1;
    transition: opacity 2s linear;
}

HTML

       <div class="alert alert-info" id="wrapper">
            <p id="text-box">…</p>
        </div>

JS

var textBox = document.getElementById('text-box');
window.onload = function () {
    var failCounter = 0;
    var current = notes[Math.floor(Math.random() * 12)];
    textBox.className = 'opaque';
    textBox.innerHTML = '…';
    function keyClicked(event) {
        if (event.target.className.split(' ')[1] === current) {
            textBox.className = 'non-opaque';
            textBox.innerHTML = '*some altered content*';
            textBox.className = 'opaque';
    …

In my JavaScript code, I initially set the content wrapper block to the 'opaque' class with the initial content. Then, under certain conditions, I switch it to 'non-opaque', update the innerHTML with the relevant content, and finally revert back to 'opaque'. Despite this approach, no animation takes place. What am I doing wrong?

javascript html css fade

Answer 1

Answer №1

One issue you may be facing is toggling the opacity too quickly, interrupting the initial transition process.

To solve this problem, consider delaying the change in innerHTML and resetting of the opacity until after the transition has finished.

Below is a concise demonstration using a looping example that highlights the importance of incorporating a setTimeout function.

var p=document.getElementById("change"),text=["One","Two","Three","Four","Five"],x=0,interval=setInterval(function(){
    x++;if(x===text.length)x=0;
    p.classList.add("hide");
    setTimeout(function(){
        p.innerHTML=text[x];
        p.classList.remove("hide");
    },500);
},2000);

#change{
    color:#000;
    font-family:arial;
    padding:5px;
    transition:opacity .5s linear;
}
.hide{
    opacity:0;
}

<p id="change">One</p>

Answer 2

One issue you may be facing is toggling the opacity too quickly, interrupting the initial transition process.

To solve this problem, consider delaying the change in innerHTML and resetting of the opacity until after the transition has finished.

Below is a concise demonstration using a looping example that highlights the importance of incorporating a setTimeout function.

var p=document.getElementById("change"),text=["One","Two","Three","Four","Five"],x=0,interval=setInterval(function(){
    x++;if(x===text.length)x=0;
    p.classList.add("hide");
    setTimeout(function(){
        p.innerHTML=text[x];
        p.classList.remove("hide");
    },500);
},2000);

#change{
    color:#000;
    font-family:arial;
    padding:5px;
    transition:opacity .5s linear;
}
.hide{
    opacity:0;
}

<p id="change">One</p>

Answer 3

Answer №2

The browser doesn't wait for transitions to finish before reverting the class back to opaque.

This effective fiddle separates the transition into its own selector and utilizes a transitionend event listener to ensure the element completely fades out before altering the content and fading it back in.

http://jsfiddle.net/0m3Lpwxo/1/

CSS:

.opaque {
    opacity: 1;
}

.non-opaque {
    opacity: 0;
}

#test {
    transition: opacity 1s linear;
}

HTML:

<div id="test" class="non-opaque">this is content</div>
<button onclick="toggle()">toggle</button>

JavaScript:

function transitionEnded() {
    var el = document.getElementById('test');
    el.innerHTML = "hello.";
    el.classList.remove('non-opaque');
}

function toggle() {
    var el = document.getElementById('test');
    el.addEventListener("transitionend", transitionEnded, true);
    el.classList.add('non-opaque');
}

Answer 4

The browser doesn't wait for transitions to finish before reverting the class back to opaque.

This effective fiddle separates the transition into its own selector and utilizes a transitionend event listener to ensure the element completely fades out before altering the content and fading it back in.

http://jsfiddle.net/0m3Lpwxo/1/

CSS:

.opaque {
    opacity: 1;
}

.non-opaque {
    opacity: 0;
}

#test {
    transition: opacity 1s linear;
}

HTML:

<div id="test" class="non-opaque">this is content</div>
<button onclick="toggle()">toggle</button>

JavaScript:

function transitionEnded() {
    var el = document.getElementById('test');
    el.innerHTML = "hello.";
    el.classList.remove('non-opaque');
}

function toggle() {
    var el = document.getElementById('test');
    el.addEventListener("transitionend", transitionEnded, true);
    el.classList.add('non-opaque');
}

Answer 5

Answer №3

To enhance your design, consider incorporating browser-specific styles in addition to your current definition. For example, you can use -webkit-transition: opacity 2s linear; for WebKit browsers.

Instead of redundantly adding transitions to multiple classes, focus on a consistent feature of your element that won't change, such as its ID, and define the transition style rules there. This approach will help streamline your CSS code and keep it more maintainable.

For comprehensive guidance on working with CSS transitions, I recommend consulting this valuable resource: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Answer 6

To enhance your design, consider incorporating browser-specific styles in addition to your current definition. For example, you can use -webkit-transition: opacity 2s linear; for WebKit browsers.

Instead of redundantly adding transitions to multiple classes, focus on a consistent feature of your element that won't change, such as its ID, and define the transition style rules there. This approach will help streamline your CSS code and keep it more maintainable.

For comprehensive guidance on working with CSS transitions, I recommend consulting this valuable resource: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

Answer 7

Answer №4

Give this a shot:

<div id="elementFade">Your Text Here</div>

function fadeOutText(id,val){
  if(isNaN(val)){ val = 9;}
  document.getElementById(id).style.opacity='0.'+val;
  //For Internet Explorer
  document.getElementById(id).style.filter='alpha(opacity='+val+'0)';
  if(val>0){
    val--;
    setTimeout('fadeOutText("'+id+'",'+val+')',90);
  }else{return;}
}

function fadeInText(id,val){
  if(isNaN(val)){ val = 0;}
  document.getElementById(id).style.opacity='0.'+val;
  //For Internet Explorer
  document.getElementById(id).style.filter='alpha(opacity='+val+'0)';

  if(val<9){
    val++;
    setTimeout('fadeInText("'+id+'",'+val+')',90);
   }else{return;}
}

Source: Here.

Answer 8

Give this a shot:

<div id="elementFade">Your Text Here</div>

function fadeOutText(id,val){
  if(isNaN(val)){ val = 9;}
  document.getElementById(id).style.opacity='0.'+val;
  //For Internet Explorer
  document.getElementById(id).style.filter='alpha(opacity='+val+'0)';
  if(val>0){
    val--;
    setTimeout('fadeOutText("'+id+'",'+val+')',90);
  }else{return;}
}

function fadeInText(id,val){
  if(isNaN(val)){ val = 0;}
  document.getElementById(id).style.opacity='0.'+val;
  //For Internet Explorer
  document.getElementById(id).style.filter='alpha(opacity='+val+'0)';

  if(val<9){
    val++;
    setTimeout('fadeInText("'+id+'",'+val+')',90);
   }else{return;}
}

Source: Here.

Answer 9

Answer №5

The JavaScript code I have utilized is as follows:

function update(){
    var element = document.getElementById("box");
    element.className = element.className + " transparent";
    setTimeout(function(){
       element.className = "opaque";
        element.innerHTML = "UPDATED";
    },1000);
}

Take a look at this DEMO, which includes the necessary CSS:

.opaque {
    opacity:1;
    transition: opacity 1s linear;
}
.transparent {
    opacity:0;/* No need to include transition property here */
}

Answer 10

The JavaScript code I have utilized is as follows:

function update(){
    var element = document.getElementById("box");
    element.className = element.className + " transparent";
    setTimeout(function(){
       element.className = "opaque";
        element.innerHTML = "UPDATED";
    },1000);
}

Take a look at this DEMO, which includes the necessary CSS:

.opaque {
    opacity:1;
    transition: opacity 1s linear;
}
.transparent {
    opacity:0;/* No need to include transition property here */
}

Text gently appearing and disappearing within a block

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

What is preventing the question div and buttons from expanding according to their content?

Determine whether a value is present in a JavaScript object in real-time while typing in a TextBox with the help of angular

Execute sequential animations on numerous elements without using timeouts

If the browser fails to fetch a page or a link is unresponsive when navigating to the current page

Move the last specified elements to the beginning of the array

Disabling the click functionality using ng-disabled on an anchor tag is effective, but the tag remains

What is the best way to display an international phone number using Angular Material V6?

Hover background color not being applied to child elements within Button element in Firefox

Tips on choosing the initial TD elements within a row

Is Angular UI's data binding more of a push or pull mechanism? How can I optimize its speed?

What is the best way to alter the text of a button when the mouse hovers over it?

Combine both typescript and javascript files within a single Angular project

Unable to utilize console.log and alert functions within the Next.js application

What causes errors in URL routeProvider with AngularJS?

jquery deleting the parent container of a child element

What is the process for identifying the ActiveX control being referenced on a webpage?

Delivering an XML file generated by PHP to a JavaScript parser

Django is giving an error message, indicating an invalid block tag. It is looking for either 'empty' or 'endfor' instead of 'else'. This may be due to not registering or loading the tag properly

Learn how to calculate and showcase time discrepancies in minutes using Angular2

Incorporate a background image and overlay it with CSS animations for a dynamic effect