css - 如何在 Blazor 中使用引导转换 .collapse
问题描述
这是一个带有短暂过渡的折叠元素的简单示例。(前两个蓝色按钮。)
这是我的 HTML
<p>
<a class="btn btn-primary" @onclick="ToggleDropdown" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</p>
<div class="collapse @DropdownCssClass" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche...
</div>
</div>
这是代码
@code {
private bool isDropdownVisible = true;
private string DropdownCssClass => isDropdownVisible ? "collapsing" : "show";
private void ToggleDropdown()
{
isDropdownVisible = !isDropdownVisible;
}
}
div 折叠但没有过渡。如何应用过渡?
谢谢
解决方案
在css-tricks.com的帮助下,我使用以下代码应用了过渡
HTML
<p>
<a class="btn btn-primary" @onclick="ToggleDropdown" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
</p>
<div class="transition-visible @DropdownCssClass" id="collapseExample">
<div class="card card-body">
Anim pariatur cliche...
</div>
</div>
C#
@code { private bool isDropdownVisible = false;
private string DropdownCssClass => isDropdownVisible ? "show" : "transition-collapsed";
private void ToggleDropdown()
{
isDropdownVisible = !isDropdownVisible;
} }
CSS
.transition-visible {
overflow: hidden;
transition: transform 0.3s ease-out;
height: auto;
transform: scaleY(1);
transform-origin: top;
}
.transition-visible.transition-collapsed {
transform: scaleY(0);
}
推荐阅读
- regex - 如何编写 sed、awk 或其他正则表达式单行来连接以匹配开头的连续行?
- c# - 我们可以创建一个包含三个具有不同数量值的列表的列表吗?
- node.js - 在 Cpanel 上安装 node.js - CRITICAL:yum.cli:Config 错误:访问配置文件时出错:///etc/yum.conf
- python - 升级ansible和python版本后出现语法错误
- python - 从 csv.file 创建文件夹
- c++ - 为什么此代码会导致 Codeforces Contest 79 B 出现运行时错误?
- javascript - 不使用 URL下载
- java - 如何从 selenium java 中的提示警告中获取文本,一旦我点击它就会消失
- command-line - 杯子添加带有ppd文件的打印机不起作用
- javascript - HTML5 视频播放器进度条准确提示