ng-mouseover/mouseleave各リスト項目のアニメーション

Question

私はマウスが各liの上にマウスを置いたときに表示されるボタンのグループを持つ項目のリストを持っていますが、今のところliの上を移動すると、すべてitem-btn-grpが表示されます。 liが表示されるように、item-btn-grpだけを欲しいです。事前にお礼をお寄せください。私はアニメーションのために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>