Css动画：过渡不反向工作答案

【问题标题】：Css animation: transition not working in reverse directionCss动画：过渡不反向工作
【发布时间】：2021-02-12 14:55:01
【问题描述】：

我正在尝试使用 HTML/CSS 制作此侧导航栏，并在其中添加一些悬停动画。每当您将鼠标悬停在图标上时，它都会缩放为两倍，并且导航栏中的其余项目会分散。但我的问题不在于我已经使用 javascript 和 CSS 实现了该动画。问题是动画在相反方向上运行不顺畅。所以我试图添加简短的 CSS 动画来检查反向动画过渡是否正常工作。

这是我的 CSS 代码：

ul{
    list-style: none;
    }
    .navmenu{
      position: fixed;
      top: 50%;
      transform: translateY(-50%);
    }
    .navmenu ul{
      padding-left: 40px;
      position: relative;
    }
    .navmenu ul li {
      padding: 15px 0;
    }
    .navmenu ul li a{
      text-decoration: none;
      position: relative;
      font-size: 1.8rem;
      font-weight: 900;
    }
    .navmenu ul li a i{
      -webkit-transition: all 2s ease-in;
              transition: all 2s ease-in;
    }
    .navmenu ul li a:hover i{
      -webkit-animation: slide-out-top 0.2s ease-out both;
              animation: slide-out-top 0.2s ease-out both;
      color: orange;
    }

    @-webkit-keyframes slide-out-top {
      0% {
        -webkit-transform: scale(1) translateY(0);
                transform: scale(1) translateY(0);
      }
      100% {
        -webkit-transform: scale(0.8,0.8) translateY(-60px);
                transform: scale(0.8,0.8) translateY(-60px);
      }
    }
    @keyframes slide-out-top {
      0% {
        -webkit-transform: scale(1) translateY(0);
                transform: scale(1) translateY(0);
      }
      100% {
        -webkit-transform: scale(0.8,0.8) translateY(-60px);
                transform: scale(0.8,0.8) translateY(-60px);
      }
    }

这是它的 HTML 代码：

<nav class="navmenu">
    <ul>
      <li><a href="#home" class=""><i class="fas fa-home"></i><span>Home</span></a></li>
      <li><a href="#projects" class=""><i class="fas fa-laptop-code"></i><span>Projects</span></a></li>
      <li><a href="#skills" class=""><i class="fas fa-code"></i><span>Skills</span></a></li>
      <li><a href="#training" class=""><i class="fas fa-dumbbell"></i><span>Training</span></a></li>
      <li><a href="#education" class=""><i class="fas fa-user-graduate"></i><span>Education</span></a> 
      </li>
      <li><a href="#contact_me" class=""><i class="far fa-address-book"></i><span>Contact me</span></a> 
      </li>
    </ul>
</nav>

https://codepen.io/naveen444/pen/zYooJzd?editors=1100

我在网上看到动画和转场是不同的，转场可以反转，但不是动画，但我之前使用过 CSS 动画，我记得转场：全 2；可以顺利地反转所有的过渡。如果我说错了什么，请原谅我。我是这方面的绝对初学者，请纠正我。

【问题讨论】：

您的代码段似乎没有反映您的问题的概要。也许你可以用你的问题片段创建一个可重现的问题。
问题是 CSS 动画在反向方向上没有平滑过渡。为什么当我们将鼠标移出时，过渡属性不起作用并且持续时间不适用。我提供了一个密码笔
您可以使用 javascript 并向您的元素添加带有动画的类，这样当您处于返回状态时，将您从预期动画返回到动画状态触发之前的特定动画.这将允许您在动画触发之前将平滑的动画恢复到初始状态。

标签： html css css-animations css-transitions

【解决方案1】：

您可以在hover 上执行transform: scale(0.8) translateY(-60px);，而不是添加animation。我已经更改了以下 css 并分叉了您的 codepen。这是你想要的工作。

.navmenu ul li a i{
  position: relative;
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s;
  color: orange;
}
.navmenu ul li a:hover i{
  -webkit-transform: scale(0.8) translateY(-60px);
  transform: scale(0.8) translateY(-60px);
  color: orange;
}

这里也是sn-p。

body {
  background: black;
}

ul {
  list-style: none;
}

.navmenu {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
}

.navmenu ul {
  padding-left: 40px;
  position: relative;
}

.navmenu ul li {
  padding: 15px 0;
}

.navmenu ul li a {
  text-decoration: none;
  position: relative;
  font-size: 1.8rem;
  font-weight: 900;
}

.navmenu ul li a span {
  font-size: 1rem;
  padding-left: 20px;
  color: orange;
  /*   transition: all 0.1s; */
  font-weight: 600;
  display: none;
}

.navmenu ul li a i {
  position: relative;
  -webkit-transition: -webkit-transform 1s;
  transition: transform 1s;
  color: orange;
}

.navmenu ul li a:hover i {
  -webkit-transform: scale(0.8) translateY(-60px);
  transform: scale(0.8) translateY(-60px);
  color: orange;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />

<body>
  <nav class="navmenu">
    <ul>
      <li><a href="#home" class=""><i class="fas fa-home"></i><span>Home</span></a></li>
      <li><a href="#projects" class=""><i class="fas fa-laptop-code"></i><span>Projects</span></a></li>
      <li><a href="#skills" class=""><i class="fas fa-code"></i><span>Skills</span></a></li>
      <li><a href="#training" class=""><i class="fas fa-dumbbell"></i><span>Training</span></a></li>
      <li><a href="#education" class=""><i class="fas fa-user-graduate"></i><span>Education</span></a></li>
      <li><a href="#contact_me" class=""><i class="far fa-address-book"></i><span>Contact me</span></a></li>
    </ul>
  </nav>

</body>

【讨论】：

该死！为什么我没想到。谢谢！但我仍然认为使用动画和关键帧进行过渡应该不是问题，因为有类似 hover.css 和 animista 的东西都可以正常工作并且它们都使用动画和关键帧。无论如何，我会选择这个作为答案。
重新评论您对现已删除的问题的评论：不，更新问题以修复错字不违反 SO 的规则。这是为了帮助澄清实际问题是什么（以防错字不是问题）。如果它是一个修复，那很好 - 错字问题被关闭并删除。如果不是，它可以帮助我们找到一个可以回答的问题。

【解决方案2】：

这些不是经典的过渡，而是关键帧动画。使用纯 CSS，您可以做到这一点；

.intern {
    -webkit-animation: in 1s;
}

.intern:hover {
    -webkit-animation: out 1s;
}

@-webkit-keyframes in {
    from   { -webkit-transform: rotate(0deg); }
    to { -webkit-transform: rotate(360deg);}
}

@-webkit-keyframes out {
    0%   { -webkit-transform: rotate(360deg); }
    100% { -webkit-transform: rotate(0deg); }
}

&lt;div style = "width : 100px; height : 100px; background-color : red" class ="intern"&gt;&lt;/div&gt;

运行代码sn-p，你会发现它在鼠标移出时执行动画。

【讨论】：

【解决方案3】：

你能检查下面的代码链接吗？希望它对你有用。

您可以使用 transform 和 transition 属性而不使用 animation 和 @-webkit-keyframes 的导航栏图标上的过渡属性来制作平滑动画。

请参考此链接：https://jsfiddle.net/yudizsolutions/zpL3yc4n/

【讨论】：

【解决方案4】：

您可以使用类样式定义之前和之后的状态，并使用事件侦听器添加/删除这些类。一种状态将具有 mouseover 侦听器，而另一种将具有 mouseleave 侦听器。然后，您需要使用 css 定义您的前后状态。然后将您的@keyframes 规则添加到这些特定的类中。

例如，您有一个为元素设置样式的 class，我们可以将其称为 before 状态 #icon。然后你就有了一个 class，它是 hover 状态 slidein。 根据你希望动画完成补间时的状态来设置它的样式。 在@keyframes 规则中为该特定类设置动画参数。然后你为 mouseout 状态设置另一个类，它有一个特定的样式，你希望元素返回到它的 original 状态后的外观。根据 mouseover 中的元素状态添加@keyframes 规则。最后，使用setTimeout 移除与动画计时持续时间一致的mouseout 状态class。

我在元素父元素上添加了一个黄色背景，以说明悬停触发事件监听器和动画元素之间的关系。

const icon = document.querySelectorAll('.icon')

const animate = (el, duration) => {
  const root = document.documentElement;
  // conditional that sets the CSS variable to the duration called in your function
  // using the css :root element, checks if the duration is over one second and 
  // formats the root variable to seconds/milliseconds accordingly
  if (`${duration}`.length > 3) {
    let whole = `${duration}`.slice(0, `${duration}`.length - 3);    
    root.style.setProperty('--duration', `${whole}s`);
  } else {
    root.style.setProperty('--duration', `.${duration}s`);
  }
  el.forEach((node) => {
    node.addEventListener('mouseenter', (e) => {
      node.children[0].classList.add('slidein');
    })
    node.addEventListener('mouseleave', (e) => {
      node.children[0].classList.add('slideout');
      node.children[0].classList.remove('slidein');
      setTimeout(() => {
        node.children[0].classList.remove('slideout')
      }, duration)
    })
  })
  console.log(root)
}

animate(icon, 650)

:root {
  --top-pos: -30px;
  --duration: 0.7s;
  --scale-to: scale(0.6)
}

#parent {
  margin-top: 30px;
  height: 50px;
  width: 50px;
}

.icon img {
  width: 50px;
  height: 50px;
}

.icon {
  margin: 10px 0;
  background: yellow;
}

.slidein {
  animation: slidein var(--duration) ease-out;
  position: relative;
  top: var(--top-pos);
  transform: var(--scale-to);
}

.slideout {
  animation: slideout var(--duration) ease-out;
  position: relative;
  transform: var(--scale-to);
  top: 0px;
}

@keyframes slidein {
  0% {
    top: 0px;
    transform: scale(1);
  }
  100% {
    top: var(--top-pos);
    transform: var(--scale-to);
  }
}

@keyframes slideout {
  0% {
    top: var(--top-pos);
    transform: var(--scale-to);
  }
  100% {
    top: 0px;
    transform: scale(1);
  }
}

<div id="parent">
  <div class="icon">
    <img src="https://nextgate.com/wp-content/uploads/2018/02/icon-implementation.png">
  </div>
  <div class="icon">
    <img src="https://res.cloudinary.com/logrhythm/image/upload/c_scale,w_175/v1519675460/icons/training-advanced-admin-icon.png">
  </div>
  <div class="icon">
    <img src="http://haltin.com.tr/wp-content/uploads/2015/12/icon_integrity-6.png">
  </div>
  <div class="icon">
    <img src="http://www.stephensre.com/images/icons-selling/icon-inspect.png">
  </div>
</div>

【讨论】：