EA Advanced Tabs – Add Content Transition Between Tabs

  • thethamesartacademy

    (@thethamesartacademy)


    1 year, 4 months ago

    I am using EA advanced Tabs to show events booking pages from WPAmelia. It all looks perfect, but switching between tabs causes the header image to briefly increase to full size as a flash frame for about half a second and then returns to looking normal.

    Rather than trying anything too complex, I wondered if anyone could please help me add a transition between the tabs?

    A one second fade up before seeing the tabs content would hopefully hide the worst of it.

    Thank you very much in advance.

    This was the code I was trying, but I think I am barking up the wrong tree:

    .eael-advance-tabs .eael-tabs-content>div.active {
animation: fadeInAnimation ease 3s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
    • This topic was modified 1 year, 4 months ago by bcworkz. Reason: code format fixed
Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    Depending on why the header image flashes large, animating the transition may or may not help. Perhaps the only way to know for sure is give it a try and see ??

    Without a live link to the page in question, I can only guess at what the issue might be. Usually the cause of flash of inappropriate layout is the first loaded CSS is wrong to start with. It’s eventually replaced with appropriate CSS, but it takes time to parse all the CSS. If the earliest loaded CSS were correct to start with, there’d be no inappropriate flash.

Viewing 1 replies (of 1 total)
  • The topic ‘EA Advanced Tabs – Add Content Transition Between Tabs’ is closed to new replies.