如何在angularjs中悬停元素添加延迟？

Question

我有一个元素:

    <span ng-mouseenter="showIt()" ng-mouseleave="hideIt()">Hover Me</span>
    <div class="outerDiv" ng-show="hovering">
        <p>Some content</p>
        <div class="innerDiv">
            <p>More Content</p>
        </div>
    </div>

这是JS:

// mouseenter event
$scope.showIt = function () {
    $scope.hovering = true;
};

// mouseleave event
$scope.hideIt = function () {
    $scope.hovering = false;
};

我希望能够在悬停事件上设置500毫秒的延迟.

我已经对这个问题有了答案,但我再也不能发布8个小时了.我会回来的!

Answer 1

就像大多数人已经在这里提到的一样,我在mouseenter事件中添加了一个计时器.

// create the timer variable
var timer;

// mouseenter event
$scope.showIt = function () {
    timer = $timeout(function () {
        $scope.hovering = true;
    }, 500);
};

我遇到的问题是,如果我滚动浏览项目并且鼠标光标击中它,弹出窗口仍会在半秒后发生.我希望能够滚动浏览项目,而不会偶然发生弹出窗口.

将超时置于变量中允许我取消超时.我在鼠标离开事件上做的事情,以确保用户不会意外触发弹出窗口.

// mouseleave event
$scope.hideIt = function () {
    $timeout.cancel(timer);
    $scope.hovering = false;
};

如果有人想在行动中看到它,这是一个小提琴: jsfiddle

Answer 2

我建议使用CSS过渡和角度动画:

JS

var app = angular.module('app', ['ngAnimate']);

CSS

.outerDiv.ng-hide-remove {
    -webkit-transition: 0.5s linear all; 
    transition: 0.5s linear all;
    transition-delay: 0.5s;
    opacity: 0;
}
.outerDiv.ng-hide-remove.ng-hide-remove-active {
    opacity: 1;
}

HTML

<span ng-mouseenter="hovering=true" ng-mouseleave="hovering=false">Hover Me</span>
<div class="outerDiv" ng-show="hovering">
    <p>Some content</p>
    <div class="innerDiv">
        <p>More Content</p>
    </div>
</div>

演示Plunker