我怎样才能让我的过渡工作，因为没有任何效果？

Question

我尝试了多种方法，例如通过持续时间和其他过渡来更改过渡持续时间，但它从未奏效。发送帮助

这是代码笔：https://codepen.io/LeLicorne/pen/ZEqpwPJ

:root {
  --homeBookmark-after-left: 0px;
  --homeBookmark-after-top: 0px;
  --homeBookmark-Color: #9747FF;
  --skillsBookmark-Color: #0079D0;
  --workBookmark-Color: #00EA25;
  --contactBookmark-Color: #F05600;
}

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  color: black;
  box-sizing: border-box;
}

body {
  background-color: #222222;
}

header {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  position: fixed;
}

header nav {
  width: 33%;
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: 50px;
  justify-content: center;
  align-items: start;
}

header nav a {
  background-color: aliceblue;
  padding: 10px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: end;
  transition-duration: 250ms;
}

header nav a:hover {
  height: 70px;
}


/* #homeBookmark::after{  it s the 'a'
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    left: var(--homeBookmark-after-left);
    top: var(--homeBookmark-after-top);
    background: transparent;
    border-right: 23px solid transparent;
    border-left: 23px solid transparent;
    border-top: 15px solid purple;
} */

#homeBookmark {
  background-color: var(--homeBookmark-Color);
}

#skillsBookmark {
  background-color: var(--skillsBookmark-Color);
}

#workBookmark {
  background-color: var(--workBookmark-Color);
}

#contactBookmark {
  background-color: var(--contactBookmark-Color);
}

header nav a i {
  font-size: 26px;
}

<header>
  <nav>
    <a href="#" id="homeBookmark"><i class="bi bi-house-fill"></i></a>
    <a href="#" id="skillsBookmark"><!-- <i class="bi bi-wrench-adjustable-circle-fill"></i> --><i class="bi bi-pie-chart-fill"></i></a>
    <a href="#" id="workBookmark"><i class="bi bi-folder-fill"></i></a>
    <a href="#" id="contactBookmark"><i class="bi bi-person-lines-fill"></i></a>
  </nav>
</header>

尝试更改过渡持续时间以过渡所有 250 毫秒和其他需要的东西 而且我还尝试了 -webkit- -moz- 和 -ms- 转换但没有用

Answer 1

如我的评论中所述，您需要添加：

1. transition: all .25s ease

   - 因为您需要

   transition

   属性。您也可以只定位

   height

   值，因为这就是您要更改的内容：

   transition: height 250ms ease

2. 您需要在主

   height

   中添加一个

   header nav a

   属性。您必须确定正确的值。我用

   10px

   作为占位符。

:root {
  --homeBookmark-after-left: 0px;
  --homeBookmark-after-top: 0px;
  --homeBookmark-Color: #9747FF;
  --skillsBookmark-Color: #0079D0;
  --workBookmark-Color: #00EA25;
  --contactBookmark-Color: #F05600;
}

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  color: black;
  box-sizing: border-box;
}

body {
  background-color: #222222;
}

header {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: row;
  justify-content: start;
  align-items: start;
  position: fixed;
}

header nav {
  width: 33%;
  height: 100%;
  display: flex;
  flex-direction: row;
  gap: 50px;
  justify-content: center;
  align-items: start;
}

header nav a {
  background-color: aliceblue;
  padding: 10px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: end;
  transition: all 250ms ease;
  height: 10px;
}

header nav a:hover {
  height: 70px;
}


/* #homeBookmark::after{  it s the 'a'
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    left: var(--homeBookmark-after-left);
    top: var(--homeBookmark-after-top);
    background: transparent;
    border-right: 23px solid transparent;
    border-left: 23px solid transparent;
    border-top: 15px solid purple;
} */

#homeBookmark {
  background-color: var(--homeBookmark-Color);
}

#skillsBookmark {
  background-color: var(--skillsBookmark-Color);
}

#workBookmark {
  background-color: var(--workBookmark-Color);
}

#contactBookmark {
  background-color: var(--contactBookmark-Color);
}

header nav a i {
  font-size: 26px;
}

<header>
  <nav>
    <a href="#" id="homeBookmark"><i class="bi bi-house-fill"></i></a>
    <a href="#" id="skillsBookmark"><i class="bi bi-pie-chart-fill"></i></a>
    <a href="#" id="workBookmark"><i class="bi bi-folder-fill"></i></a>
    <a href="#" id="contactBookmark"><i class="bi bi-person-lines-fill"></i></a>
  </nav>
</header>

Answer 2

欢迎！不起作用对我们来说没有任何意义。你期待发生什么？如果你的意思是 a 标签增长，那是因为你没有在任何地方设置 transition 属性。删除您的 transition-duration 属性并将其替换为 transition: all .25s ease；您还需要将高度属性添加到标题导航规则。

来自 disinfor

（感谢他）