将显示从块更改为无,然后淡入

时间:2019-10-21 15:02:26

标签: javascript css

我通过设置无显示/阻止和淡入/淡出来遍历表单部分。在“ p1”按钮上单击,我可以淡出元素“ Q1”并显示:无,显示:块“ Q2”-但我永远无法让Q2淡入。它以完全不透明的方式显示,但从没有过渡。 / p>

我尝试完全不使用显示,而是从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-您可以看到淡入淡出/显示效果很好,而不是淡入淡出

2 个答案:

答案 0 :(得分:0)

select t.* from t where t.user is not null union all select t.* from t where t.user is null and not exists (select 1 from t t2 where t2.business = t.business and t2.type = t.type and t2.class = t.class and t2.user is not null ); display更改为block也会由于某些原因而改变不透明度。由于Q2已被隐藏且不透明度设置为0,因此无需更改设置显示值。

将Q2的初始none设置为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();
    });
 });

答案 1 :(得分:-2)

编辑:请查看我建议的here at CodePen。可以。

我没有在此处发表评论的权限,但是为什么不使用visibility: hiddenvisibility: visible而不是更改display属性?

opacity属性应保持不变。

您还可以将position: absolutevisibility: hidden属性一起添加以模拟display: none的效果。然后将position改回static