如何在同一元素上为CSS和角度过渡设置不同的过渡持续时间？ [英] How to have different transition durations for css and angular transition on same element?

问题描述

给出一个简单的角度ng-repeat列表：

Given a simple angular ng-repeat list:

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

我有一个简单的css动画，用于鼠标悬停，只需将列表项扩展0.2秒即可。 / p>

I have a simple css animation for a mouse hover that simply expands the list item over 0.2 seconds.

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

和一个单独的角度动画，用于离开/输入角度过渡，使项目逐渐淡出从视图中删除它们时为1秒：

and a separate angular animation for leave / enter angular transition that fades items out over 1 second when they're removed from the view:

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

我的问题是原始的悬停动画提供了scale（1.1）由于淡入淡出的动画，现在0.2秒现在可以持续1秒以上。

My problem is that the original hover animation providing the scale(1.1) that was 0.2seconds is now lasting over 1second because of the fade animation.

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

How can I reformat my transitions to use separate durations?

说明：
我想将悬停打开/关闭效果和离开/进入效果分开。悬停开关的持续时间都应为0.2秒，离开/进入效果的持续时间应为1秒。有关如何为特定转换/过渡而不是为所有过渡/过渡指定持续时间的一般性回答将有所帮助。

Clarification: I would like to separate the hover on/off effects and the leave/enter effects. The hover on/off should both have their own duration of 0.2 seconds and the leave/enter effects should have 1 second. A general answer of how to designate a duration for a specific transformation / transition instead of for all would be helpful.

推荐答案

此<一个href = https://jsfiddle.net/n6dvsfmv/ rel = nofollow> JSFiddle 我想出了一个例子，表明CSS OnMouseOut操作有一个小技巧：

This JSFiddle I came up with shows that there is a slight trick for CSS OnMouseOut action:

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

我希望能帮上忙，

安德鲁

这篇关于如何在同一元素上为CSS和角度过渡设置不同的过渡持续时间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！