css - 关闭导航菜单时未应用 CSS 过渡持续时间
问题描述
我正在创建一个全屏导航菜单,该菜单会在入口处向下滑动并弹跳。
但是,当再次单击我的菜单切换按钮以关闭全屏菜单时,它不会向后滑动,而是突然退出屏幕。
我添加transition: 2.5s
到该nav.overlay
属性以查看是否可以解决问题,但不幸的是,我无法让菜单在退出时滑出屏幕。
关于我可能遗漏的任何提示?
const menuToggle = document.querySelector('a.menu-toggle')
const navMenu = document.querySelector('nav.overlay')
document.addEventListener('click', function() {
const clickEd = menuToggle.contains(event.target)
if (clickEd) {
navMenu.classList.toggle('bounce-in-top')
menuToggle.classList.toggle('clicked')
} else {
navMenu.classList.remove('bounce-in-top')
menuToggle.classList.remove('clicked')
}
})
a.menu-toggle {
position: fixed;
top: 20px;
left: 18px;
z-index: 1000;
max-width: 590px;
height: 100%;
transition: all 0.5s ease;
cursor: pointer;
transition-delay: 0.2s;
}
a.menu-toggle svg {
width: 65px;
transition: all 0.5s ease;
/* transition-delay: 0.2s; */
}
a.menu-toggle.clicked svg {
transform: rotate(45deg);
}
.bounce-in-top {
-webkit-animation: bounce-in-top 1.1s both;
animation: bounce-in-top 1.1s both;
}
@-webkit-keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-90%);
transform: translateY(-90%);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 1;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@-webkit-keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-90%);
transform: translateY(-90%);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 1;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes bounce-in-top {
0% {
-webkit-transform: translateY(-500px);
transform: translateY(-500px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0;
}
38% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
opacity: 1;
}
55% {
-webkit-transform: translateY(-65px);
transform: translateY(-65px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
72% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
81% {
-webkit-transform: translateY(-28px);
transform: translateY(-28px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
90% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
95% {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
nav.overlay {
transform: translateY(-100%);
-webkit-transition: 2.5s;
transition: 2.5s;
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
background: red;
}
/* Position the content inside the overlay */
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
/* The navigation links inside the overlay */
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #fff;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #000;
}
<nav class="overlay">
<div class="overlay-content">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</nav>
<a class="menu-toggle">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 122 92" enable-background="new 0 0 122 92" xml:space="preserve">
<g>
<g>
<line fill="#3B51A2" stroke="#EE5383" stroke-width="6" stroke-miterlimit="10" x1="59.81" y1="3.43" x2="59.81" y2="89.25"/>
<line fill="#3B51A2" stroke="#EE5383" stroke-width="6" stroke-miterlimit="10" x1="19.18" y1="45.64" x2="105.32" y2="45.64"/>
</g>
<g>
<line fill="#3B51A2" stroke="#000000" stroke-width="6" stroke-miterlimit="10" x1="55.31" y1="0.75" x2="55.31" y2="86.57"/>
<line fill="#3B51A2" stroke="#000000" stroke-width="6" stroke-miterlimit="10" x1="14.68" y1="42.97" x2="100.82" y2="42.97"/>
</g>
</g>
</svg>
</a>
解决方案
你可以另外一个类,例如bounce-out-top
,动画与顶部弹跳相反。
document.addEventListener('click', function() {
const clickEd = menuToggle.contains(event.target)
if (clickEd) {
navMenu.classList.remove('bounce-out-top')
navMenu.classList.toggle('bounce-in-top')
menuToggle.classList.toggle('clicked')
} else {
// first remove `out`, then add `in`
navMenu.classList.remove('bounce-in-top');
navMenu.classList.add('bounce-out-top');
menuToggle.classList.remove('clicked')
}
})
推荐阅读
- python - 如何编写与 C# 等效的 Python 加密/解密函数,以便 Python/C# 可以相互解密加密字符串?
- r - 如何在给定一列二进制数据的情况下使用 ggplot 制作多列图表
- keycloak - 查看发送给客户端的属性列表
- c++ - VS Code - 一个项目中只有一个 cpp 文件可以编译
- python - Python - 为 django 项目重新激活我的 virtualenv
- c++ - 通用记录器与异常模式
- spring-boot - Spring Boot中日志级别旁边的整数
- react-native - 强制退出后反应本机博览会应用程序崩溃
- yii - Yii2:当两者在同一个域中时,如何从后端链接到前端?
- encoding - 读取 SAS 表,显示值。编码