javascript - ng-mouseover/mouseleave 为每个列表项设置动画

Question

我有一个元素列表，其中包含一组按钮，当鼠标悬停在每个 li 上时，我想显示这些按钮，但从现在开始，每当我将鼠标悬停在任何 li ，所有 item-btn-grp 都是 display 。我只想显示 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

希望对你有所帮助。