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

问题

Given a simple angular ng-repeat list:

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

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

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

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?

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.

回答1:

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

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

I hope it helps,

Andrew

来源：https://stackoverflow.com/questions/34601057/how-to-have-different-transition-durations-for-css-and-angular-transition-on-sam