如何在同一元素上進行不同的CSS過渡時間和角度過渡？

給出一個簡單的角度NG-重複列表：如何在同一元素上進行不同的CSS過渡時間和角度過渡？

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

我有，僅僅在0.2秒擴展列表項鼠標懸停一個簡單的CSS動畫。

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秒。如何指定特定轉換/轉換的持續時間而不是全部的一般答案會有所幫助。

來源

2016-01-04 jmancherje

這JSFiddle我想出表明，有對CSS的onmouseout動作略有招：

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

我希望它能幫助，

安德魯

來源

2016-01-05 00:06:22

它看起來像這樣的作品初始懸停，但從懸停狀態轉換回原始狀態仍然會獲得較長的延遲時間。它將迅速縮放，然後以漸變的速度緩慢縮小。有沒有辦法選擇懸停/取消懸停？ – jmancherje

如果這不是你正在尋找的，那麼我需要一些澄清。你想要hoverin是0.2s +規模1-> 1.1和h魚是1s +規模1.1 - > 1.0？我有點失去了你實際嘗試在這裏實現的目標。 –

它應該需要0.2s來擴展和收縮懸停/ mouseleave。當從列表中移除並加回到列表中時，它應該消失/消退。你有的小提琴是0.2秒擴展和1秒的合同mouseover/mouseleave – jmancherje

如何在同一元素上進行不同的CSS過渡時間和角度過渡？

回答

相關問題