html - 当鼠标离开css时平滑过渡

Question

我正在制作菜单。当我将鼠标悬停在汉堡图标菜单动画上时效果很好，但是当鼠标离开它时菜单突然消失。我希望它在反向动画中消失。我该怎么做？请帮忙。 https://codepen.io/sen-tanmoy/pen/NWPvLLK

HTML 代码

<div class="wrapper">
    <nav class="navbar">
        <ul>
            <li class="no">
                <div class="hamburger-menu-icon">
                    <div class="line line1"></div>
                    <div class="line line2"></div>
                    <div class="line line3"></div>
                </div>
                <ul class="dropdown" aria-label="submenu">
                    <li><a href="#" class="same">Home</a></li>
                    <li><a href="#" class="same">Projects</a></li>
                    <li><a href="#" class="same">News/Awards</a></li>
                    <li><a href="#" class="same">Upcoming Projects</a></li>
                    <li><a href="#" class="same">About Us</a></li>
                    <li><a href="#" class="same">Our Team</a></li>
                    <li><a href="#" class="same">Contact Us</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>

标签： htmlcss

Answer 1

看起来它突然消失了，因为您在悬停和悬停display之间进行了更改。我删除了它并添加了一个单独的关闭动画，当你不悬停时播放。blocknone

将其设置为的问题display: block;是您可以通过将鼠标悬停在菜单所在的区域上来触发动画，即使它已关闭。

.dropdown所以我添加了另一个动画来在菜单项关闭后 缩放div。

在这一点上，它看起来没问题，除了菜单会在页面加载后开始打开然后折叠，所以我添加了另一个动画来隐藏它，直到菜单项完成折叠。

您可能想稍微弄乱时间，但这应该让您非常接近。

* {
    margin: 0;
    padding: 0;
}

.navbar {
    width: 330px;
    height: 95vh;
    margin-top: 5vh;
    position: fixed;
    display: flex;
    transition: opacity 1.5s ease;
}

.hamburger-menu-icon {
    width: 55px;
    height: 50px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    cursor: pointer;
    background-color: silver;
    border-radius: 50%;
}

.line {
    width: 100%;
    height: 5px;
    background-color: rgb(255, 255, 255);
    transition: all 0.8s;
    display: flex;
    justify-content: center;
    align-items: center;
}

nav a {
    text-decoration: none;
    font-size: 24px;
}

nav ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
    margin-right: auto;
}

nav li {
    color: black;
    /* background: #262626; */
    display: block;
    padding: 10px 25px;
    position: relative;
    text-decoration: none;
    transition-duration: 500ms;
}
.no {
    background: none;
}
.dropdown {
    padding-top: 20px;
    width: 250px;
    transform-origin: top left;
    animation: lateClose 2000ms both ease;
/*     transition-duration: 500ms; */
}

.same {
    position: relative;
    padding-bottom: 10px;
    animation: initialArrival 1500ms both ease;
}

.same::after {
    content: "";
    width: 100%;
    height: 2px;
    position: absolute;
    /* left: 10px; */
    bottom: 0;
    right: 0;
    background-color: #2A324B;
    transform: scaleX(0);
    transition: transform 0.5s;
}
.same:hover::after {
    transform: scaleX(1);
    transform-origin: left;
}

nav li a {
    color: inherit;
}

.no:hover .dropdown {
  animation: animateOpen 1ms both ease;
}
.dropdown:hover,
.dropdown:focus {
    /* background-color: #cc2a36; */
    color: #fff;
    cursor: pointer;
}

nav ul li ul {
    position: absolute;
    transition: background-color 0.5s ease-in;
    margin-top: 10px;
    left: 0;
    display: block;
}

nav ul li:hover >ul,
nav ul li:focus >ul,
.dropdown:hover,
.dropdown:focus {
    opacity: 1;
/*     display: block; */
/*     transition: all 1s ease; */
}

nav ul li ul li {
    clear: both;
    width: 100%;
    animation: animateClosed 900ms both ease;
}
nav:hover ul li ul li {
    clear: both;
    width: 100%;
    animation: animateOpen 900ms both ease;
}
nav ul li ul li:nth-of-type(1) {
    transform-origin: top left;
    transform: skewX(45deg) scaleY(0);
}
nav ul li ul li:nth-of-type(2) {
    transform-origin: top right;
    transform: skewX(-45deg) scaleY(0);
    animation-delay: 150ms;
}
nav ul li ul li:nth-of-type(3) {
    transform-origin: top right;
    transform: skewX(45deg) scaleY(0);
    animation-delay: 300ms;
}
nav ul li ul li:nth-of-type(4) {
    transform-origin: top right;
    transform: skewX(-45deg) scaleY(0);
    animation-delay: 450ms;
}
nav ul li ul li:nth-of-type(5) {
    transform-origin: top right;
    transform: skewX(45deg) scaleY(0);
    animation-delay: 600ms;
}
nav ul li ul li:nth-of-type(6) {
    transform-origin: top right;
    transform: skewX(-45deg) scaleY(0);
    animation-delay: 750ms;
}
nav ul li ul li:nth-of-type(7) {
    transform-origin: top right;
    transform: skewX(45deg) scaleY(0);
    animation-delay: 900ms;
}

@keyframes animateOpen {
    0% {
        transform: skewX(0deg) scaleY(0);
    }
    100% {
        transform: skewX(0deg) scaleY(1);
    }
}

@keyframes animateClosed {
    0% {
        transform: skewX(0deg) scaleY(1);
    }
    100% {
        transform: skewX(0deg) scaleY(0);
    }
}

@keyframes lateClose {
  0% {
    transform: scaleY(1);
  }
  99% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(0);
  }
}

@keyframes initialArrival {
  0% {
    opacity: 0;
  }
  99% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="wrapper">
        <nav class="navbar">
            <!-- <h2>Saffron</h2> -->
            <ul>
                <li class="no">
                    <div class="hamburger-menu-icon">
                        <div class="line line1"></div>
                        <div class="line line2"></div>
                        <div class="line line3"></div>
                    </div>
                    <ul class="dropdown" aria-label="submenu">
                        <li><a href="#" class="same">Home</a></li>
                        <li><a href="#" class="same">Projects</a></li>
                        <li><a href="#" class="same">News/Awards</a></li>
                        <li><a href="#" class="same">Upcoming Projects</a></li>
                        <li><a href="#" class="same">About Us</a></li>
                        <li><a href="#" class="same">Our Team</a></li>
                        <li><a href="#" class="same">Contact Us</a></li>
                    </ul>
                </li>
            </ul>
        </nav>
    </div>