Animate.css和Angularjs ng-hide

我正在學習和嘗試Angularjs和animate.css。我試圖在ng-show爲true或false時添加動畫。顯示和隱藏作品，但不是動畫。希望這裏有人能告訴我我做錯了什麼。Animate.css和Angularjs ng-hide

這裏是plunk。

感謝您的幫助。

2014-06-24 Miguel-.o

我不確定新版本的animate會在animate.css中表現出色，因爲它們會在轉換過程中添加/刪除多個類別...如果animate.css是一項要求，那麼使用ng-類和處理搞清楚應該基於布爾值應用哪個類http://plnkr.co/edit/LN8wunbuPrKcuEV1ouMQ?p=preview – shaunhusain

no animate.css不是必需的。我只是想弄清楚他們是如何一起玩的。感謝您的迴應以及您提供的解決方案。 –

np我也嘗試了很多關於ng-class的東西，但不幸的是無法工作...很高興看到解決方案使用animate.css，不知道爲什麼使用showme屬性的簡單ng類是添加/刪除與fadeIn和fadeOut指定爲動畫和使用動畫類...不幸的是沒有真正的經驗與animate.css這麼難，我告訴什麼是錯誤..雖然這是：http://plnkr.co /編輯/ Ey20sPZLqOCmfdFcBai7？p =預覽 – shaunhusain

下面是你的代碼的一個稍微修改版本與ng-show和animate.css一起工作。

HTML

<div ng-controller="controller"> 
    <button ng-click="showme = !showme">Show or Hide</button> 
    <div ng-show="showme" class="boxme"> 
    <h2>Box to Show and Hide</h2> 
    <p>Show and hide this box using animate.css the angularway!</p> 
    </div> 
</div>

的JavaScript

(function() { 
    var app = angular.module("theapp", ['ngAnimate']); 
    var controller = function($scope){ 
     $scope.showme = false; 
    }; 
    app.controller("controller", controller); 
}());

CSS

.boxme.ng-hide-add { 
    -webkit-animation: fadeOutLeftBig 0.4s; 
    display: block!important; 
} 
.boxme.ng-hide-remove { 
    -webkit-animation: fadeInLeftBig 0.4s; 
}

http://jsfiddle.net/h58wsxcw/

請注意左邊的選項（body標籤，外部資源）必須設置爲在jsfiddle上運行並運行。

來源

2014-10-10 15:20:38 wizeowl

找到了一個解決方案，似乎與ngAnimate和animate.css一起工作，我將版本升級到1.2.17，它似乎仍然使用這種方法......不知道爲什麼我不能在一個plunkr中重現： http://jsbin.com/usaruce/2677/edit?html,css,js,output

來源

2014-06-24 18:09:04 shaunhusain

謝謝。我不明白爲什麼ng-show和ng-hide不適用於animation.css。謝謝您的幫助。 –

Animate.css和Angularjs ng-hide

回答

相關問題