Apply animation to remove a text

Question

I have implemented a nav tab-like view. Three buttons and when we click on one button the text corresponding to the other two buttons get hidden. But I want that when we update the text then we must be seeing some animation like fade in.

var prevId = 1;
function updateView(id) {
    document.getElementById("subsec"+prevId).style.visibility = "hidden";
    document.getElementById("subsec"+id).style.visibility = "visible";
    prevId = id;
}

<div id="subsec1" >
  Tab 1
</div>
<button onclick="updateView(1)"></button>

<div id="subsec2" style="visibility: hidden">
  Tab 2
</div>
<button onclick="updateView(2)"></button>

<div id="subsec3"  style="visibility: hidden">
  Tab 3
</div>
<button onclick="updateView(3)"></button>

Can anyone help me with this. I have attached an example of how my view looks. Example: I am currently on tab 3 and I click on tab 1 then tab 3 content should disappear but through animation and content of tab 1 must appear on-screen through animation only(like fade in).

Answer 1

I had a little play about to show how you might use a slightly simplified HTML markup and a modified button clickhandler function to trigger adding new styles (animations) to your tabs.

The CSS animations here are very basic examples but should serve to illustrate the effect of fading in.

const clickhandler=function(e){
  document.querySelectorAll('button[data-tab]').forEach(bttn=>bttn.classList.remove('activebttn') );
  document.querySelectorAll('div[data-tab]').forEach( div=>div.classList.remove('active','initial') );
  document.querySelector('div[ data-tab="'+this.dataset.tab+'" ]').classList.add('active');
  this.classList.add('activebttn');
}

document.querySelectorAll('button[data-tab]').forEach( bttn=>bttn.addEventListener('click',clickhandler) );

div[data-tab]{
  background:white;
  border:1px solid rgba(0,0,0,0.25);
  border-radius:1rem 0 1rem 0;
  box-shadow:0 0 1rem rgba(0,0,0,0.25);
  margin:1rem auto;
  width:600px;
  min-height:400px;
  padding:1rem;
  opacity:0;
}
div[data-tab]:not(.active){
  display:none;
}
@keyframes fadein{
  0%   { opacity:0; }
  100% { opacity:1; background:whitesmoke; }
}
@keyframes fadeout{
  0%{ opacity:100%;display:block; }
  100%{ opacity:0%; background:white; display:none; }
}
@keyframes shake {
  10%, 90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%, 80% {
    transform: translate3d(2px, 0, 0);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%, 60% {
    transform: translate3d(4px, 0, 0);
  }
}
.active{
  animation-name:fadein, shake;
  animation-duration:1s, 1s;
  animation-timing-function:ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 250ms,750ms;
}
.hide{
  animation-name:fadeout;
  animation-duration:1s;
  animation-timing-function:ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 250ms;
}
.initial{
  display:block!important;
  opacity:1!important;
}
button{
  background:rgba(0,0,0,0.25);
  border-radius:1rem;
  border:1px solid transparent;
  width:200px;
  cursor:pointer;
  padding:1rem;
  transition:ease-in-out 250ms all;
}
button:hover{
  border:1px solid gray;
  background:rgba(255,255,255,0.25);
  box-shadow:0 0 5px rgba(0,0,0,0.25);
}
button:active,
.activebttn{
  border:1px solid gray;
  background:rgba(0,255,0,0.25);
}

<button data-tab=1>Tab 1</button>
<button data-tab=2>Tab 2</button>
<button data-tab=3>Tab 3</button>



<div data-tab=1 class='initial'>
  Code finance. Let's put a pin in that one-sheet we need to button up our approach optimize for search nor my supervisor didn't like the latest revision you gave me can you switch back to the first revision?.
</div>
<div data-tab=2>
  We need to socialize the comms with the wider stakeholder community prairie dogging, roll back strategy drink the Kool-aid meeting assassin, but form without content style without meaning, yet can we jump on a zoom.
</div>
<div data-tab=3>
  Cloud native container based knowledge process outsourcing blue sky. Tribal knowledge. I called the it department about that ransomware because of the old antivirus, but he said that we were using avast 2021 let's schedule a standup during the sprint to review our kpis.
</div>

Answer 2

Please read this from w3schools.com.

Try adding css like

.fadeIn {
    animation-name: FadeIn;
    animation-duration: 4s;
    animation-fill-mode: both;
}

.fadeOut {
    animation-name: FadeOut;
    animation-duration: 4s;
    animation-fill-mode: both;
}

@keyframes FadeIn {
    from { opacity: 0%; }
    to { opacity: 100%; }
}

@keyframes FadeOut {
    from { opacity: 100%; }
    to { opacity: 0%; }
}

and then adding javascript like so:

var prevId = 1;
function updateView(id) {
    document.getElementById("subsec"+prevId).className = "fadeOut";
    document.getElementById("subsec"+id).className = "fadeIn";
    preId = id;
}    

replace visibility: in html to opacity: 0%, and set the classes at the beginning if you want them to have animation at the beginning.

This is not optimalized.