Question

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

<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代替了它。对于您的问题，我建议采用以下解决方案：

默认情况下，将您想要切换其可见度的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;
}

创建一个在“social == 1”时添加到div的类：

<强> CSS：

.show-element{
    display: block;
}

现在，使用'show-element'类添加ng-class以切换可见性：

<强> 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？

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

1 个答案: