鼠标离开div/space时如何激活动画？

问题描述 投票：0回答：1

所以我正在制作一个具有从顶部“滑动”下来的菜单的网站。 这是 aniamtion 的 css 代码；

@keyframes slide-vertical-44-px-down {
    0%{height: 0px;}
    100%{height: 44px;}
}

我让它工作，但我不知道当鼠标离开菜单栏时如何让它回到原来的高度。

所有CSS

*{
    margin:0px;
}

@font-face {
    font-family: ground;
    src: url(Blackground-z88Bl.otf);
}
.top{
    font-family: Helvetica;
    height: 50px;
    position: fixed;
    width: 100%;
}
.top:hover{
    height:100px
}
#cool-lookin-box{
    /*aniamcja*/
    animation-name: slide-vertical-50-px;
    animation-duration: 400ms; 
    animation-fill-mode:forwards;
    /**/
    background-color: rgb(68, 68, 68);
    overflow: hidden;
    white-space: nowrap;
    font-size: 40px;
    font-family: ground;
    color: white;
    display: block;
    padding: 5px;
}
@keyframes slide-vertical-50-px {
    0%{height: 0px;}
    100%{height: 50px;}
}
@keyframes slide-vertical-44-px-down {
    0%{height: 0px;}
    100%{height: 44px;}
}
@keyframes  slide-vertical-44-px-up {
    100%{height: 44px;}
    0%{height: 0px;}
}
.top:hover .menu{
    display: flex;
    animation: slide-vertical-44-px-up 200ms forwards;
    overflow: hidden;
    white-space: nowrap;
    box-shadow: 10px 10px 20px rgb(83, 83, 83);
}
.menu {
    display: none;
    justify-content: center;
    background-color: rgb(128, 128, 128);
    cursor: pointer;
    animation: slide-vertical-44-px-up 200ms forwards;
}
.menu #menu-bar li{
    color: whitesmoke;
    display: inline-block;
    padding: 10px;
    align-items: center;
    font-size: 20px;
    transition: 400ms;
}
.menu #menu-bar li:hover{
    background-color: rgb(175, 175, 175);
    border-radius: 5px;
    color: rgb(65, 65, 65);
}
#test{
    height: 1000px;
    background-color: rgb(0, 0, 0);
}

所有 html

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <script src="code.js"></script>
    </head>
    <body>
        <div class="top">
            <div id="cool-lookin-box">
                <p>TESTOWY TEXT</p>
            </div>
                <div class="menu">
                    <ul id="menu-bar">
                        <li>First</li>
                        <li>Second</li>
                        <li>Third</li>
                        <li>Fourth</li>
                        <a href="https://google.com"><li>Fifth</li></a>
                    </ul>
                </div>
            </div>
            <div id="test"></div>
        </body>
</html>

我尝试过使用过渡来做到这一点，但它不起作用。我也尝试用另一个动画来做，但它也不起作用。如果有人能帮助我，我将非常感激。

html css menu css-animations
1个回答
0
投票

说明

如果您必须使用“幻数”方法，则使用 CSS 动画高度是一场噩梦。这似乎也是你可以通过过渡而不是动画更轻松地完成的事情。

我建议在这种情况下使用过渡的主要原因是，悬停将运行过渡，而取消悬停将仅反向运行过渡，而不需要指定单独的动画。

如果您想做的不仅仅是反转过渡，那么您应该使用动画。

所以现在要解决高度问题......我建议不要使用高度，而是使用带有 

translateY
和/或 
scaleY
的变换，或者 - 我个人最喜欢的选项 - 
grid-template-rows
。

示例

使用过渡

随着变换

* {
  margin: 0px;
  /* Helps with stacking context, but could be applied to essential elements only */
  position: relative;
}

@font-face {
  font-family: ground;
  src: url(Blackground-z88Bl.otf);
}

.top {
  font-family: Helvetica;
  height: 50px;
  position: fixed;
  width: 100%;
  /* Keeps it on top of everything */
  z-index: 20;
}

#cool-lookin-box {
  /*aniamcja*/
  animation-name: slide-vertical-50-px;
  animation-duration: 400ms;
  animation-fill-mode: forwards;
  /**/
  background-color: rgb(68, 68, 68);
  overflow: hidden;
  white-space: nowrap;
  font-size: 40px;
  font-family: ground;
  color: white;
  display: block;
  padding: 5px;
  /* Make sure menu is hidden when collapsed */
  z-index: 10;
}

.top:hover .menu,
.menu:hover {
  /* display: flex; (not necessary) */
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 10px 10px 20px rgb(83, 83, 83);
  /* Transform End */
  transform: translateY(0);
}

.menu {
  display: flex; /* Changed to flex, as "none" cannot be eased yet */
  justify-content: center;
  background-color: rgb(128, 128, 128);
  cursor: pointer;
  /* Transition */
  transition: transform 200ms ease;
  /* Transform Start */
  transform: translateY(-100%);
}

.menu #menu-bar li {
  color: whitesmoke;
  display: inline-block;
  padding: 10px;
  align-items: center;
  font-size: 20px;
  transition: background-color 400ms ease;
}

.menu #menu-bar li:hover {
  background-color: rgb(175, 175, 175);
  border-radius: 5px;
  color: rgb(65, 65, 65);
}

#test {
  height: 1000px;
  background-color: rgb(0, 0, 0);
  color: white;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="code.js"></script>
</head>

<body>
  <div class="top">
    <div id="cool-lookin-box">
      <p>TESTOWY TEXT</p>
    </div>
    <div class="menu">
      <ul id="menu-bar">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Fourth</li>
        <a href="https://google.com">
          <li>Fifth</li>
        </a>
      </ul>
    </div>
  </div>
  <div id="test"></div>
</body>

</html>

带有网格模板行

* {
  margin: 0px;
  /* Helps with stacking context, but could be applied to essential elements only */
  position: relative;
}

@font-face {
  font-family: ground;
  src: url(Blackground-z88Bl.otf);
}

.top {
  font-family: Helvetica;
  height: 50px;
  position: fixed;
  width: 100%;
  /* Keeps it on top of everything */
  z-index: 20;
}

#cool-lookin-box {
  /*aniamcja*/
  animation-name: slide-vertical-50-px;
  animation-duration: 400ms;
  animation-fill-mode: forwards;
  /**/
  background-color: rgb(68, 68, 68);
  overflow: hidden;
  white-space: nowrap;
  font-size: 40px;
  font-family: ground;
  color: white;
  display: block;
  padding: 5px;
}

.top:hover .menu,
.menu:hover {
  /* display: flex; (not necessary) */
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 10px 10px 20px rgb(83, 83, 83);
  /* Grid Template Rows End */
  grid-template-rows: 1fr;
}

.menu {
  display: grid; /* Changed to grid */
  justify-content: center;
  background-color: rgb(128, 128, 128);
  cursor: pointer;
  /* Transition */
  transition: grid-template-rows 200ms ease;
  /* Grid Template Rows Start */
  grid-template-rows: 0fr;
}

/* Necessary to collapse with grid-template-rows */
#menu-bar {
  overflow-y: hidden;
}

.menu #menu-bar li {
  color: whitesmoke;
  display: inline-block;
  padding: 10px;
  align-items: center;
  font-size: 20px;
  transition: background-color 400ms ease;
}

.menu #menu-bar li:hover {
  background-color: rgb(175, 175, 175);
  border-radius: 5px;
  color: rgb(65, 65, 65);
}

#test {
  height: 1000px;
  background-color: rgb(0, 0, 0);
  color: white;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="code.js"></script>
</head>

<body>
  <div class="top">
    <div id="cool-lookin-box">
      <p>TESTOWY TEXT</p>
    </div>
    <div class="menu">
      <ul id="menu-bar">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Fourth</li>
        <a href="https://google.com">
          <li>Fifth</li>
        </a>
      </ul>
    </div>
  </div>
  <div id="test"></div>
</body>

</html>

使用动画

* {
  margin: 0px;
  /* Helps with stacking context, but could be applied to essential elements only */
  position: relative;
}

@font-face {
  font-family: ground;
  src: url(Blackground-z88Bl.otf);
}

.top {
  font-family: Helvetica;
  height: 50px;
  position: fixed;
  width: 100%;
  /* Keeps it on top of everything */
  z-index: 20;
}

#cool-lookin-box {
  /*aniamcja*/
  animation-name: slide-vertical-50-px;
  animation-duration: 400ms;
  animation-fill-mode: forwards;
  /**/
  background-color: rgb(68, 68, 68);
  overflow: hidden;
  white-space: nowrap;
  font-size: 40px;
  font-family: ground;
  color: white;
  display: block;
  padding: 5px;
  /* Makes sure menu is hidden when collapsed */
  z-index: 10;
}

.top:hover .menu,
.menu:hover {
  /* display: flex; (not necessary) */
  overflow: hidden;
  white-space: nowrap;
  box-shadow: 10px 10px 20px rgb(83, 83, 83);
  /* Open Animation */
  animation: open-menu 500ms ease;
  transform: translateX(0);
  grid-template-rows: 1fr;
}

.menu {
  display: grid; /* Changed to grid */
  justify-content: center;
  background-color: rgb(128, 128, 128);
  cursor: pointer;
  /* Close Animation */
  animation: close-menu 200ms ease;
  transform: translateX(100%);
  grid-template-rows: 0fr;
}

@keyframes open-menu {
  from {
    transform: translateX(100%);
    grid-template-rows: 1fr;
  }
  to {
    transform: translateX(0);
    grid-template-rows: 1fr;
  }
}

@keyframes close-menu {
  from {
    transform: translateX(0);
    grid-template-rows: 1fr;
  }
  to {
    transform: translateX(0);
    grid-template-rows: 0fr;
  }
}

/* Necessary to collapse with grid-template-columns */
#menu-bar {
  overflow: hidden;
}

.menu #menu-bar li {
  color: whitesmoke;
  display: inline-block;
  padding: 10px;
  align-items: center;
  font-size: 20px;
  transition: background-color 400ms ease;
}

.menu #menu-bar li:hover {
  background-color: rgb(175, 175, 175);
  border-radius: 5px;
  color: rgb(65, 65, 65);
}

#test {
  height: 1000px;
  background-color: rgb(0, 0, 0);
  color: white;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="code.js"></script>
</head>

<body>
  <div class="top">
    <div id="cool-lookin-box">
      <p>TESTOWY TEXT</p>
    </div>
    <div class="menu">
      <ul id="menu-bar">
        <li>First</li>
        <li>Second</li>
        <li>Third</li>
        <li>Fourth</li>
        <a href="https://google.com">
          <li>Fifth</li>
        </a>
      </ul>
    </div>
  </div>
  <div id="test"></div>
</body>

</html>

希望有帮助！

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.