带有动画类的 ng-if 不适用于 ng-mouseover

Question

我有一个链接，当我结束它时，我会更改变量值，因此<p> 标记将与 ng-if 一起显示。代码如下：

<div class="position text-center" ng-mouseover="social=1" ng-mouseleave="social=-1">
        <a   href="#6thPage">something</a>
    </div>

而ng-if部分如下

<div class="col-md-12 center-block text-center grey" ng-if="social == 1">
<p class="fadeInDown animated">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quibusdam ullam tenetur facilis cupiditate iusto laudantium, ex nobis.</p>
</div>

当我删除 fadeInDown 和动画类时，它可以正常工作。但是当我像上面那样使用它时，当我将鼠标移到链接上时会有一点闪烁。

Answer 1

我在使用ng-if 时遇到了类似的问题。我改用ng-class 解决了它。对于您的问题，我建议以下解决方案：

1. 默认情况下，将要切换其可见性的 div 保留为 display: none：

HTML：

<div class="col-md-12 center-block text-center grey hide-element">
<p class="fadeInDown animated">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quibusdam ullam tenetur facilis cupiditate iusto laudantium, ex nobis.</p>
</div>

CSS：

.hide-element {
    display: none;
}

1. 创建一个类，当“social == 1”时添加到 div：

CSS：

.show-element{
    display: block;
}

1. 现在，添加一个 ng-class 以使用“show-element”类切换可见性：

HTML：

<div class="col-md-12 center-block text-center grey" ng-class="{'show-element': social  == 1, 'hide-element': social != 1}">
<p class="fadeInDown animated">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates quibusdam ullam tenetur facilis cupiditate iusto laudantium, ex nobis.</p>
</div>

另外，我假设您使用的是 animate.css？