Question

给出一个简单的角度ng重复列表：

<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);
}

和一个单独的角度动画，用于离开/输入角度过渡，当它们从视图中移除时，会使项目超过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秒，因为淡入淡出动画。

如何重新格式化转场以使用不同的持续时间？

澄清： 我想分开悬停开/关效果和离开/输入效果。悬停开/关应该都有自己0.2秒的持续时间，而离开/输入效果应该有1秒。如何指定特定转换/转换的持续时间而非全部转换的一般答案将会有所帮助。

Answer 1

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

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

我希望它有所帮助，

安德鲁

如何在同一元素上有css和角度转换的不同转换持续时间？

1 个答案: