0

I am moving through form sections by setting display none/block and fade in/out. On "p1" button click I can fade out element "Q1" & display:none, display:block "Q2" - but I can never get Q2 to fade in. It shows up with full opacity, but never with a transition.

I have tried not using display at all, instead height from 0 to 100%, but still no transition with opacity. I have tried using this with css components and changing the style class, still no opacity transition on Q2.

const Q1 = document.getElementById("Q1");
const Q2 = document.getElementById("Q2");
const p1 = document.getElementById("p1");

Q1.style.display = "block";
Q1.style.opacity = 100;
Q1.style.transition = "opacity 1.0s";

Q2.style.display = "none";
Q2.style.opacity = 0;
Q2.style.transition = "opacity 1.0s";

const f_fade1 = (() => { Q1.style.opacity = 0; });
const hide_1 = (() => { Q1.style.display = "none"; });
const unhide_2 = (() => { Q2.style.display = "block"; });
const f_unfade2 = (() => { Q2.style.opacity = 1; });

p1.addEventListener("click", function(e) {
     f_fade1();
     Q1.addEventListener('transitionend', function(e) {
        hide_1();
        unhide_2();
        f_unfade2();

      });
      });

<div id="Q1">
<table>
    <tr class="highOption">
        <td>
            <label class="container">
                <input type="radio" id="1A" name="radio1" value="Agressive">
                <span class="checkmark"></span>
            </label>
        </td>
        <td>Aggressive<br>(99)</td>
        <td>100%</td>
        <td>
            <div class="pie" style="background: conic-gradient(#2453B7 1000%, #44CF6C 0);"></div>
        </td>
        <td>55%</td>
    </tr>
    <tr class="highOption">
        <td>
            <label class="container">
                <input type="radio" id="1B" name="radio1" value="Agressive/Moderate">
                <span class="checkmark"></span>
            </label>
        </td>
        <td>Moderate/Aggressive<br>(97-98)</td>
        <td>80%</td>
        <td>
            <div class="pie" style="background: conic-gradient(#2453B7 80%, #44CF6C 0);"></div>
        </td>
        <td>45%</td>
    </tr>
    <tr class="highOption">
        <td>
            <label class="container">
                <input type="radio" id="1C" name="radio1" value="Moderate">
                <span class="checkmark"></span>
            </label>
        </td>
        <td>Moderate<br>(93-96)</td>
        <td>60%</td>
        <td>
            <div class="pie" style="background: conic-gradient(#2453B7 60%, #44CF6C 0);"></div>
        </td>
        <td>35%</td>
    </tr>
    <tr class="highOption">
        <td>
            <label class="container">
                <input type="radio" id="1D" name="radio1" value="Moderate/Conservative">
                <span class="checkmark"></span>
            </label>
        </td>
        <td>Moderate/Conservative<br>(85-92)</td>
        <td>40%</td>
        <td>
            <div class="pie" style="background: conic-gradient(#2453B7 40%, #44CF6C 0);"></div>
        </td>
        <td>28%</td>
    </tr>
    <tr class="highOption">
        <td>
            <label class="container">
                <input type="radio" id="1E" name="radio1" value="Conservative">
                <span class="checkmark"></span>
            </label>
        </td>
        <td>Conservative<br>(51-84)</td>
        <td>20%</td>
        <td>
            <div class="pie" style="background: conic-gradient(#2453B7 20%, #44CF6C 0);"></div>
        </td>
        <td>20%</td>
    </tr>
    <tr class="highOption">
        <td>
            <label class="container">
                <input type="radio" id="1F" name="radio1" value="Fixed Income">
                <span class="checkmark"></span>
            </label>
        </td>
        <td>Fixed Income<br>(1-50)</td>
        <td>100%</td>
        <td>
            <div class="pie" style="background: conic-gradient(#2453B7 0%, #44CF6C 0);"></div>
        </td>
        <td>10%</td>
    </tr>
</table>
</div>


<div id="Q2">
<table>
    <tr class="highOption">
        <td>
            <label class="container">
                <input type="radio" id="2A" name="radio2" value="Core 0%/Explore 100%">
                <span class="checkmark"></span>
            </label>
        </td>
        <td>100%</td>
        <td colspan="2">
            <div class="pie" style="background: conic-gradient(#00108E 0%, #1089FF 0); align:center;"></div>
        </td>
        <td> 0%</td>
    </tr>
    <tr class="highOption">
        <td>
            <label class="container">
                <input type="radio" id="2B" name="radio2" value="Core 25%/Explore 75%">
                <span class="checkmark"></span>
            </label>
        </td>
        <td> 75%</td>
        <td colspan="2">
            <div class="pie" style="background: conic-gradient(#00108E 25%, #1089FF 0); align:center;"></div>
        </td>
        <td> 25%</td>
    </tr>

</table>
</div>

<button id="p1" type="button">Page 2 Next</button>

I am currently using no css specific to Q1 or Q2 (just table stuff)

Code Pen - you can see how the fade out / display works fine, just not the fade in

rcbjmbadb
  • 179
  • 1
  • 8
  • 2
    Can you please post some of the HTML? And any initial CSS. Please read: [How to create a Minimal, Complete, and Verifiable example](https://stackoverflow.com/help/mcve) – disinfor Oct 21 '19 at 15:04
  • @Akshit Mehra I don't want it to take up space, so if I used visibility, I would also have to adjust the height. I actually tried both, and still couldn't get the 2nd transition to work. – rcbjmbadb Oct 21 '19 at 15:13
  • @Akshit Mehra So far, position: absolute doesn't work well well with my other table properties. I may try to work this out later if there are no other ideas. – rcbjmbadb Oct 21 '19 at 15:27
  • @disinfor I added html, and a codepen to demonstrate my problem – rcbjmbadb Oct 21 '19 at 15:38

2 Answers2

0

Changing the display from block to none also changes the opacity for some reason. Because Q2 is already hidden with the opacity set to 0 there is not need to change set the display value.

Setting initial display value of Q2 to block and not changing the display value will give you the expect result.

const Q1 = document.getElementById("Q1");
 const Q2 = document.getElementById("Q2");
 const p1 = document.getElementById("p1");
  
 Q1.style.display = "block";
 Q1.style.opacity = 100;
 Q1.style.transition = "opacity 1.0s";
  
 Q2.style.display = "none";
 Q2.style.opacity = 0;
 Q2.style.transition = "opacity 1.0s";
  
 const f_fade1 = (() => { Q1.style.opacity = 0; });
 const hide_1 = (() => { Q1.style.display = "none"; });
 const unhide_2 = (() => { Q2.style.display = "block"; Q2.offsetHeight; });
 const f_unfade2 = (() => { Q2.style.opacity = 1; });
  
 p1.addEventListener("click", e => {
    f_fade1();
    Q1.addEventListener('transitionend', e => {
      hide_1();
      unhide_2();
      f_unfade2();
    });
 });
<div id="Q1">
  <table>
    <tr class="highOption">
      <td>
          <label class="container">
              <input type="radio" id="1A" name="radio1" value="Agressive">
              <span class="checkmark"></span>
          </label>
      </td>
      <td>Aggressive<br>(99)</td>
      <td>100%</td>
      <td>
          <div class="pie" style="background: conic-gradient(#2453B7 1000%, #44CF6C 0);"></div>
      </td>
      <td>55%</td>
    </tr>
    <tr class="highOption">
      <td>
        <label class="container">
          <input type="radio" id="1B" name="radio1" value="Agressive/Moderate">
          <span class="checkmark"></span>
        </label>
      </td>
      <td>Moderate/Aggressive<br>(97-98)</td>
      <td>80%</td>
      <td>
        <div class="pie" style="background: conic-gradient(#2453B7 80%, #44CF6C 0);"></div>
      </td>
      <td>45%</td>
    </tr>
    <tr class="highOption">
      <td>
        <label class="container">
          <input type="radio" id="1C" name="radio1" value="Moderate">
          <span class="checkmark"></span>
        </label>
      </td>
      <td>Moderate<br>(93-96)</td>
      <td>60%</td>
      <td>
        <div class="pie" style="background: conic-gradient(#2453B7 60%, #44CF6C 0);"></div>
      </td>
      <td>35%</td>
    </tr>
    <tr class="highOption">
      <td>
        <label class="container">
            <input type="radio" id="1D" name="radio1" value="Moderate/Conservative">
            <span class="checkmark"></span>
        </label>
      </td>
      <td>Moderate/Conservative<br>(85-92)</td>
      <td>40%</td>
      <td>
        <div class="pie" style="background: conic-gradient(#2453B7 40%, #44CF6C 0);"></div>
      </td>
      <td>28%</td>
    </tr>
    <tr class="highOption">
      <td>
        <label class="container">
            <input type="radio" id="1E" name="radio1" value="Conservative">
            <span class="checkmark"></span>
        </label>
      </td>
      <td>Conservative<br>(51-84)</td>
      <td>20%</td>
      <td>
        <div class="pie" style="background: conic-gradient(#2453B7 20%, #44CF6C 0);"></div>
      </td>
      <td>20%</td>
    </tr>
    <tr class="highOption">
      <td>
        <label class="container">
            <input type="radio" id="1F" name="radio1" value="Fixed Income">
            <span class="checkmark"></span>
        </label>
      </td>
      <td>Fixed Income<br>(1-50)</td>
      <td>100%</td>
      <td>
        <div class="pie" style="background: conic-gradient(#2453B7 0%, #44CF6C 0);"></div>
      </td>
      <td>10%</td>
    </tr>
  </table>
</div>
    
    
<div id="Q2">
  <table>
    <tr class="highOption">
      <td>
        <label class="container">
          <input type="radio" id="2A" name="radio2" value="Core 0%/Explore 100%">
             <span class="checkmark"></span>
        </label>
      </td>
      <td>100%</td>
      <td colspan="2">
        <div class="pie" style="background: conic-gradient(#00108E 0%, #1089FF 0); align:center;"></div>
      </td>
      <td> 0%</td>
    </tr>
    <tr class="highOption">
      <td>
        <label class="container">
          <input type="radio" id="2B" name="radio2" value="Core 25%/Explore 75%">
          <span class="checkmark"></span>
        </label>
      </td>
        <td> 75%</td>
        <td colspan="2">
            <div class="pie" style="background: conic-gradient(#00108E 25%, #1089FF 0); align:center;"></div>
        </td>
        <td> 25%</td>
      </tr>   
  </table>
</div>
    
<button type="button" id="p1">Click me</button>
Samuel
  • 513
  • 3
  • 17
  • It works, but I need the height of Q2 to also not be shown, without the display set to "none" it gives me the blank space that Q2 takes up. – rcbjmbadb Oct 21 '19 at 15:48
  • In that case you need do call `Q2.offsetHeight` of Q2 after you change it the display value to `block`. I've updated my anwser. More info can be found here https://stackoverflow.com/questions/39548684/css-transition-opacity-is-not-working-where-element-had-displaynone-then-change – Samuel Oct 21 '19 at 16:46
-2

EDIT: Please see what I suggested here at CodePen. It works.

I don't have the permission to comment here, but why don't you use visibility: hidden and visibility: visible, instead of changing the display property?

The opacity property shall remain as it is.

You can also add position: absolute along with the visibility: hidden property to simulate display: none effect. And then change back the position to static.

Akshit Mehra
  • 747
  • 5
  • 17
  • @rcbjmbadb I just edited the answer to include `position: absolute`. Let me know if this helps? I am not able to reply to your comment on the question. – Akshit Mehra Oct 21 '19 at 15:15
  • @rcbjmbadb You can try the CodePen I added. It solves the issue of blank space that Q2 takes. – Akshit Mehra Oct 21 '19 at 15:58