ng-mouseover/mouseleave動畫爲每個列表項目

Question

我有一組按鈕，我想要顯示鼠標懸停在每個li上時顯示的項目列表，但現在只要我懸停在任何li上，顯示全部item-btn-grp。我只想要item-btn-grp爲li被展開。提前歡迎任何幫助。我爲動畫使用ngAnimate。

.item-btn-grp { 
    display:inline-block; 
    float: right; 
    height: 40px; 
    border-left: 1px solid #a1a0a0; 
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s; 
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s; 
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s; 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s; 
    right: 0; 
} 

.item-btn-grp.ng-hide { 
    right: -50px; 
    opacity:0; 
    padding:0 10px; 
} 


<div id="tasks-list"> 
    <li class="task-item" ng-mouseover="myValue = true" ng-mouseleave="myValue = false"> 
     Do this And then that 
     <div class='item-btn-grp' ng-show="myValue" > 
      <button class="item-btn-ok"><span class="glyphicon glyphicon-ok"></span></button> 
      <button class="item-btn-remove"><span class="glyphicon glyphicon-remove"></span></button> 
     </div> 
    </li> 
    <li class="task-item" ng-mouseover="myValue = true" ng-mouseleave="myValue = false"> 
     Do this And then that 
     <div class='item-btn-grp' ng-show="myValue" > 
      <button class="item-btn-ok"><span class="glyphicon glyphicon-ok"></span></button> 
      <button class="item-btn-remove"><span class="glyphicon glyphicon-remove"></span></button> 
     </div> 
    </li> 
</div> 

Answer 1

請通過以下鏈接經歷：Animations: the Angular Way

希望它會幫助你。

Answer 2

這可以直接通過CSS來實現，請使用以下的CSS，

.task-item:hover .item-btn-grp { 
    display:inline-block; 
    height: 40px; 
    border-left: 1px solid #a1a0a0; 
    -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s; 
    -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s; 
    -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s; 
    transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 1s; 
    right: 0; 
    opacity:1; 
} 

.item-btn-grp{ 
    right: -50px; 
    opacity:0; 
    padding:0 10px; 
} 

請參閱本plunk

Answer 3

您可以通過項目中使用的值。

假設你使用的是ng-repeat

<li class="task-item" ng-repeat="item in taskItems" ng-mouseover="item.myValue = true" ng-mouseleave="item.myValue = false"> 
    <div class='item-btn-grp' ng-show="item.myValue" > 
     <!-- buttons --> 
    </div> 
</li>