Question

我正在为我的投资组合页面设计导航栏。现在，当我将一个div元素悬停时，：before元素应该在0.4秒内扩展它的宽度。但事实并非如此，那就是：在弹出之前没有过渡。希望有人知道这个问题。这是我的源代码。

＆＃13;

org.springframework.data.domain.Pageable

＆＃13;

.header__navigation {
  display: flex;
}
.header__navigation .nav {
  margin: 0 30px;
}
.header__navigation .nav > div {
  position: relative;
}
.header__navigation .nav > div:before {
  transition: width 0.4s;
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  transition: all 0.3s;
}
.header__navigation .nav > div:hover {
  cursor: pointer;
}
.header__navigation .nav > div:hover:before {
  height: 2px;
  width: 100%;
}

＆＃13;

Answer 1

通过将初始宽度设置为零，我获得了一些成功这为mycommandline = fullFilePath + " 1>nul 2>nul" CreateProcess(pathToFile, mycommandline , ...)个不同的值提供了动画效果。

此外，HTML中没有符合transition的元素我将CSS更改为.nav > div。

我还将.nav > span移出height:2px定义这样，转换就可以同时适用于:hover和mouseenter。

mouseleave

.header__navigation {
  display: flex;
}

.header__navigation .nav {
  margin: 0 30px;
}

.header__navigation .nav>span {
  position: relative;
}

.header__navigation .nav>span:before {
  transition: width 0.4s;
  position: absolute;
  content: '';
  bottom: 0;
  left: 0;
  right: 0;
  background: tomato;
  transition: all 0.3s;
  width: 0;
  height:2px;
}

.header__navigation .nav>span:hover {
  cursor: pointer;
}

.header__navigation .nav>span:hover:before {
  width: 100%;
}

过渡不起作用：之前

1 个答案: