我通过设置无显示/阻止和淡入/淡出来遍历表单部分。在“ 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-您可以看到淡入淡出/显示效果很好,而不是淡入淡出
答案 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: hidden
和visibility: visible
而不是更改display
属性?
opacity
属性应保持不变。
您还可以将position: absolute
与visibility: hidden
属性一起添加以模拟display: none
的效果。然后将position
改回static
。