Question

我在an example i found上练习css。我尝试使用过渡效果显示导航上方的子菜单。我可以在悬停时更改子菜单的位置：

nav li:hover .menu-sub {
  display: block;
  transform: translateY(-100%);
}

我还修改了代码以添加过渡效果：

.menu-sub {
  position: absolute;
  left: 0;
  background: #444;
  width: 100%;
  display: none;
  color: #fff;
  padding: 2em;
  -webkit-transition: -webkit-transform 1.5s ease;
    -moz-transition: -moz-transform 1.5s ease;
    -o-transition: -o-transform 1.5s ease;
    transition: transform 1.5s ease;
}

位置发生了变化，但我根本看不到任何过渡效应。我做错了什么？

Answer 1

请修改下面显示的过渡，写错了。

.menu-sub {
  position: absolute;
  left: 0;
  background: #444;
  width: 100%;
  opacity:0;
  overflow:hidden;
  box-sizing:border-box;
  height:0px;
  color: #fff;
  -webkit-transition: opacity 1.5s ease-out;
    -moz-transition: opacity 1.5s ease-out;
    -o-transition: opacity 1.5s ease-out;
    transition: opacity 1.5s ease-out;
}

转换不适用于display，而是使用以下效果。

Codepen Demo

我们可以将height从0px切换为auto（全高）和opacity从0（不可见）切换到1（可见）。您可以看到我们只在opacity上看到动画，这将产生最佳效果。

Answer 2

使用visibility:hidden然后visible

display: none在活动DOM中禁用它，并且无法为动画等内容选择使用此CSS的元素。

.menu-sub {
  position: absolute;
  left: 0;
  background: #444;
  width: 100%;
  visibility: hidden;
  color: #fff;
  padding: 2em;
  transition: transform 1.5s ease;
}
nav li:hover .menu-sub {
  visibility: visible;
  transform: translateY(-100%);
}

如何在div上应用变换和过渡效果

2 个答案: