如何在同一元素上为 css 和 angular 过渡设置不同的过渡持续时间？

Question

给定一个简单的 angular ng-repeat 列表：

<ul>
   <li class="fade" ng-repeat="item in list"> {{property}} </li>
</ul>

我有一个简单的 css 鼠标悬停动画，可以在 0.2 秒内简单地扩展列表项。

li {
  transition: all .2s ease-in-out;
}
li:hover {
  transform: scale(1.1);
}

以及用于离开/进入的单独 angular 动画 angular 过渡，当项目从视图中移除时会在 1 秒内淡出：

.fade {
  transition: 1s linear all;
  -webkit-transition: 1s linear all;
}

.fade.ng-enter {
  opacity: 0;
}

.fade.ng-enter.ng-enter-active {
  opacity:; 1;
}

.fade.ng-leave {
  opacity: 1;
}

.fade.ng-leave.ng-leave-active {
  opacity: 0;
}

我的问题是，由于淡入淡出动画，原来提供 0.2 秒比例 (1.1) 的悬停动画现在持续超过 1 秒。

如何重新格式化我的过渡以使用单独的持续时间？

澄清： 我想将悬停 on/off 效果和 leave/enter 效果分开。悬停 on/off 应该有自己的 0.2 秒持续时间，leave/enter 效果应该有 1 秒。关于如何为特定转换/转换而不是为所有指定持续时间的一般答案会有所帮助。

Answer 1

我想出的这个 JSFiddle 表明 CSS OnMouseOut 动作有一个小技巧：

li:not( :hover ){ ... }

希望对你有帮助，

安德鲁

如何在同一元素上为 css 和 angular 过渡设置不同的过渡持续时间？

How to have different transition durations for css and angular transition on same element?

javascript

css

css-transitions

angularjs

ng-animate