Ich lerne und experimentiere mit Angularjs und animate.css. Ich versuche Animationen hinzuzufügen, wenn die ng-show wahr oder falsch ist. Das Zeigen und Verstecken funktioniert, aber nicht die Animationen. Hoffentlich kann mir hier jemand zeigen, was ich falsch mache.Animate.css und Angularjs ng-hide
Hier ist die plunk.
danke für die Hilfe.
Hier ist eine leicht modifizierte Version Ihres Codes mit ng-show und animate.css zusammenarbeiten.
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;
}
Beachten Sie die Optionen auf der linken Seite (body-Tag, externe Ressourcen), die gesetzt werden müssen, um auf jsfiddle zu laufen.
Eine Lösung gefunden, die mit ngAnimate und animate.css zu funktionieren scheint und ich habe die Version auf 1.2.17 aktualisiert und es scheint immer noch mit dieser Methode zu funktionieren ... nicht sicher, warum ich nicht in einem Plunkr reproduzieren konnte: http://jsbin.com/usaruce/2677/edit?html,css,js,output
Danke. Ich verstehe nicht, warum ng-show und ng-hide nicht mit animation.css funktionieren würden. Danke für die Hilfe. –
Ich bin nicht sicher, dass die neueren Versionen von $ animate mit animate.css gut spielen werden, da sie während des Übergangs mehrere Klassen hinzufügen/entfernen ... falls animate.css eine Voraussetzung ist, könnten Sie besser mit ng- Klasse und Handhabung herauszufinden, welche Klasse basierend auf einem booleschen angewendet werden sollte http://plnkr.co/edit/LN8wunbuPrKcuEV1ouMQ?p=preview – shaunhusain
keine animate.css ist keine Voraussetzung. Ich habe nur versucht herauszufinden, wie sie beide zusammen spielen. Vielen Dank für Ihre Antwort und die von Ihnen zur Verfügung gestellte Lösung. –
np Ich habe auch einige Dinge in Bezug auf ng-Klasse versucht, aber leider konnte es nicht funktionieren ... wäre schön, eine Lösung für die Arbeit mit animate.css zu sehen, nicht sicher, warum eine einfache ng-Klasse mit der Showme-Eigenschaft war das Hinzufügen/Entfernen der Klassen mit FadeIn und FadeOut als Animationen angegeben und mit der animierten Klasse ... leider keine echte Erfahrung mit animate.css so schwer für mich zu sagen, was los ist .. hier ist das aber: http://plnkr.co/edit/Ey20sPZLqOCmfdFcBai7? p = Vorschau – shaunhusain