javascript - 将显示从 block 更改为无，然后淡入

我通过设置不显示/ block 和淡入/淡出来浏览表单部分。在“p1”按钮上单击我可以淡出元素“Q1”和显示:无，显示: block “Q2” - 但我永远无法让 Q2 淡入。它显示为完全不透明，但从不过渡。

我试过完全不使用显示，而是使用从 0 到 100% 的高度，但仍然没有不透明度过渡。我已经尝试将它与 css 组件一起使用并更改样式类，但在第二季度仍然没有不透明度过渡。

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>

我目前没有使用特定于 Q1 或 Q2 的 css(只是表格内容)

Code Pen - 你可以看到淡出/显示如何正常工作，只是不是淡入

最佳答案

将 display 从 block 更改为 none 也会出于某种原因更改不透明度。因为 Q2 已经隐藏且不透明度设置为 0，所以不需要更改设置显示值。

将 Q2 的初始 display 值设置为 block 并且不更改显示值将为您提供预期的结果。

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>

关于javascript - 将显示从 block 更改为无，然后淡入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58489065/

javascript - 将显示从 block 更改为无，然后淡入

上一篇：javascript - 如何通过 javascript 更改样式表

下一篇：html - 无法垂直和水平对齐元素