让 ngAnimate 在 ionic 应用程序中工作

Question

我按照以下链接在应用程序中获取角度动画：

http://angularanimation.ya.com.tr/start.html

我的 css 文件夹中有 animate.css，并在 index.html 中链接到它。

另外，我在 app.js 中有 ngAnimate 作为依赖模块

我尝试在我的 html 中使用动画：

<ion-view class="slide-from-top">
<ion-content>

<div class="contentArea">  
        <form action="#">

                                <div class="row">

                <label>The Italian Melt</label>
                <input class="field" type="text" value="160.00">
                <input class="number" type="text" value="1">
                <i class="fa fa-plus-circle"></i>
                <i class="fa fa-minus-circle"></i>
                            </div>


      <div class="row">

                <label>The Italian Melt</label>
                <input class="field" type="text" value="160.00">
                <input class="number" type="text" value="1">
                <i class="fa fa-plus-circle"></i>
                <i class="fa fa-minus-circle"></i>
            </div>
            <div class="row">

                <label>The Italian Melt</label>
                <input class="field" type="text" value="160.00">
                <input class="number" type="text" value="1">
                <i class="fa fa-plus-circle"></i>
                <i class="fa fa-minus-circle"></i>
            </div>

            <hr>
                <div class="row text">
                    <div class="col-33">Subtotal</div>
                    <div class="col-75">Rs. 210.00</div>
                 </div>
            <div class="row text">
                    <div class="col-33 blueText">Discount</div>
                    <div class="col-75 blueText">Rs. 42.00</div>

            </div>
                <div class="row text">
                    <div class="col-33">Delivery Fee</div>
                    <div class="col-75">Rs. 10.00</div>
                </div>
                 <hr>
                  <div class="row text">Total will refund off</div></br>
                   <div class="row text">
                   <div class="col-33 totalBig">Total</div>

                    <div class="col-75 totalBig">Rs. 178.00</div>
                </div>
                  <hr>
                    <form action="#">
                        <div class="customRow">
                     <div class="row coupon">

                        <label>Coupon</label>
                        <input class="couponField" type="text">
                        <button class="applyBtn">Apply</button>

                </div>
            </div>
        </form>
   <p class="row redText">Minimum Order :  Rs. 500/-</p>

    </div>
<button class="button-checkout">Proceed to Checkout <i class="fa fa-shopping-cart"></i> >></button>

</ion-content>
 </ion-view>

事实上，当我进入控制台时，

我看到了：

如何让它工作？

Answer 1

请检查https://daneden.github.io/animate.css/

动态动画

你必须像调用动画函数

<ion-view class="myAnimation">
    <ion-content>
        ....
    </ion-content>
</ion-view>

并在页面加载时添加类

$('#myAnimation').addClass('animated shake');

动画完成后，您必须删除添加到 div 的类，这样动画就可以在不刷新页面的情况下再次工作。为此，您必须这样做

$('#myAnimation').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', removeClass);

function removeClass()
{
    $('#myAnimation').removeClass('animated shake');
}

这种方式是动态的，但你也可以在html中设置为静态，比如

静态

<ion-view class="animated shake">
    <ion-content>
        ....
    </ion-content>
</ion-view>