CSS 缓入淡出过渡无法正常工作答案

【问题标题】：CSS ease-in-out transition not working properlyCSS 缓入淡出过渡无法正常工作
【发布时间】：2017-01-24 18:48:17
【问题描述】：

我在导航栏上使用 CSS 过渡缓入缓出来实现鼠标悬停。但是过渡只有在鼠标悬停时才会缓入，并且在光标离开超链接区域后立即恢复，不会平滑缓出。

这是我使用的 CSS：

nav {
    position: fixed;
    z-index: 1000;
    top: 0;
    bottom: 0;
    width: 200px;
    background-color: #036;    
}

nav ul {
    list-style: none;
    margin-top: 15px;
}

nav ul li a {
    text-decoration: none;
    display: block;
    text-align: center;
    color: #fff;
    padding: 10px 0;
}

.nav-logo {
    margin-left: 20px;
    background-color: #cacaca;
}

.nav-logo:hover {
    transform: scale(1.1);
    transition: all 1s ease-in-out;
}

nav ul li a:hover {
    background-color: gold;
    color: black;
    border-radius: 10px;
    transform: scale(1.1);
    transition: .3s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -ms-transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

【问题讨论】：

标签： html css

【解决方案1】：

你需要采取过渡风格：

transition: .3s ease-in-out;
-moz-transition: all 1s ease-in-out;
-ms-transform: scale(1.1);
-webkit-transform: scale(1.1);

并从nav ul li a:hover 中删除它们并将它们添加到实际元素nav ul li a

虽然它们仍处于悬停状态，但您实际上是在未悬停时移除过渡，因此在您离开悬停状态后过渡不会应用。

【讨论】：

【解决方案2】：

您需要在根元素上添加过渡，而不是在悬停状态。

nav {
  background-color: yellow;
  position: relative;
  overflow: auto;
  transition: background-color .3s ease-in-out;
}
nav:hover {
  background-color: pink;
}

http://codepen.io/mrshannonyoung/pen/BLzpNz

【讨论】：