如何让我的过渡效果生效，因为什么都不起作用？

huangapple
go评论60阅读模式
英文:

How can i get my transition working because nothing works?

问题

I tried multiple things like changing the transition duration by a transition all with the duration and others but it never worked. Send help

我尝试了多种方法，例如通过使用带有持续时间的 transition all 来更改过渡持续时间等，但从未奏效。发送帮助

Here's the codepen: https://codepen.io/LeLicorne/pen/ZEqpwPJ

这是 CodePen 链接：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 {
  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>

I hope this helps! 我希望这有所帮助！

英文:

I tried multiple things like changing the transition duration by a transition all with the duration and others but it never worked. Send help

Here's the codepen: https://codepen.io/LeLicorne/pen/ZEqpwPJ

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

: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 &#39;a&#39;
content: &#39;&#39;;
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;
}

<!-- language: lang-html -->

&lt;header&gt;
&lt;nav&gt;
&lt;a href=&quot;#&quot; id=&quot;homeBookmark&quot;&gt;&lt;i class=&quot;bi bi-house-fill&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; id=&quot;skillsBookmark&quot;&gt;&lt;!-- &lt;i class=&quot;bi bi-wrench-adjustable-circle-fill&quot;&gt;&lt;/i&gt; --&gt;&lt;i class=&quot;bi bi-pie-chart-fill&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; id=&quot;workBookmark&quot;&gt;&lt;i class=&quot;bi bi-folder-fill&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; id=&quot;contactBookmark&quot;&gt;&lt;i class=&quot;bi bi-person-lines-fill&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/nav&gt;
&lt;/header&gt;

<!-- end snippet -->

tried changing transition-duration to transition all 250ms and the other things of needed
and also i tried with the -webkit- -moz- and -ms- transition and didn't work

答案1

得分: 0

以下是您要翻译的内容：

根据我的评论提到，您需要添加：

  1. transition: all .25s ease - 因为您需要transition属性。您也可以只针对height值进行目标设置，因为那是您要更改的内容：transition: height 250ms ease
  2. 您需要为主要的 header nav a 添加一个 height 属性。您需要确定正确的值。我使用 10px 作为占位符。
英文:

As mentioned in my comment, you need to add:

  1. transition: all .25s ease - since you need the transition property. You could also target just the height value, since that's what you're changing: transition: height 250ms ease
  2. You need to add a height property to the main header nav a. You'll have to determine the correct value. I used 10px as a placeholder.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

: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 &#39;a&#39;
content: &#39;&#39;;
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;
}

<!-- language: lang-html -->

&lt;header&gt;
&lt;nav&gt;
&lt;a href=&quot;#&quot; id=&quot;homeBookmark&quot;&gt;&lt;i class=&quot;bi bi-house-fill&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; id=&quot;skillsBookmark&quot;&gt;&lt;i class=&quot;bi bi-pie-chart-fill&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; id=&quot;workBookmark&quot;&gt;&lt;i class=&quot;bi bi-folder-fill&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;a href=&quot;#&quot; id=&quot;contactBookmark&quot;&gt;&lt;i class=&quot;bi bi-person-lines-fill&quot;&gt;&lt;/i&gt;&lt;/a&gt;
&lt;/nav&gt;
&lt;/header&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月20日 00:41:05
  • 转载请务必保留本文链接：https://go.coder-hub.com/76056949.html
  • css
  • transition
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定