Question

我有一个项目列表，其中包含一组按钮，当鼠标悬停在每个li上时，我希望显示这些按钮，但是当我将鼠标悬停在任何li上时，所有{ {1}}显示。我只想将item-btn-grp悬停在item-btn-grp上以显示。提前感谢您的帮助。我正在使用ngAnimate来制作动画。

li

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>

每个列表项的ng-mouseover / mouseleave动画

3 个答案: