css - 动画右侧的关闭侧面板
问题描述
所以我的右侧边栏动画很好地进入了,但是我现在如何动画出来它只是在没有任何动画的情况下关闭?
.calendarQuickpanelContainer {
animation: animateopen 0.6s;
bottom: 0;
display: none;
position: fixed;
top: 0;
right: 0;
width: 462px;
z-index: 100;
}
.calendarQuickpanel {
display: block;
}
@keyframes animateopen {
0% {
right: -462px;
opacity: 0;
}
100% {
right: 0;
opacity: 1;
}
}
谢谢
解决方案
动画不是很好,这里最好使用过渡。你有更好的控制,因为你可以使用一个类来切换状态。
function toggleFunction() {
var element = document.getElementById("sidebar");
element.classList.toggle("active");
}
#sidebar {
background: lightblue;
width: 250px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
transform: translateX(-260px);
opacity: 0;
transition: transform 1s, opacity 1s;
}
#sidebar.active {
transform: translateX(0px);
opacity: 1;
}
button {
float: right;
margin: 32px;
}
<div id="sidebar">
</div>
<button onclick="toggleFunction()">toggle sidebar</button>
推荐阅读
- visual-studio-code - VSCode 在花括号内缩进
- python - 有没有其他方法可以在蛇游戏中制造障碍?
- c# - 在 API ASP.Net Core 中下载文件
- c++ - 分数背包的堆栈溢出
- rust - 如何使 serde 将 BigInt 反序列化为 u64?
- java - 使用 PageObjects 时变量 Webdriver 驱动程序的问题
- python - 从pdf中的表中提取json中的清晰数据
- javascript - 如何使用javascript获取自动ID以在firebase中获取嵌套数据?
- java - 迭代和复制 HashMap 值的有效方法
- c# - 如何在 Blazor 组件初始化中限制事件订阅