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

【问题标题】：ng-mouseover/mouseleave animate for each list item每个列表项的 ng-mouseover/mouseleave 动画
【发布时间】：2017-02-10 09:39:06
【问题描述】：

我有一个带有一组按钮的项目列表，当鼠标悬停在每个 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>

【问题讨论】：

你能发布工作小提琴吗？

标签： javascript html css angularjs

【解决方案1】：

请点击此链接：Animations: the Angular Way

希望对你有帮助。

【讨论】：

【解决方案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

【讨论】：

【解决方案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>

【讨论】：

但这意味着我必须为每个项目添加一个 myValue 才能在每个 li 上显示按钮：/
我不知道你的项目的结构，但如果他们有一个 id，你可以使用地图。 ng-mouseover="map[item.id] = true", ng-mouseleave="map[item.id] = false", ng-show="map[item.id] === true" 并在您的控制器中你初始化它 $scope.map = {};