Zwiń przejście nie działa z interfejsem użytkownika kątowego Bootstrap

Próbuję utworzyć element div, który będzie się wyświetlał/ukrywał po kliknięciu przycisku. UI Bootstrap page pokazuje ładny prosty przykład, który używa przejścia css.Zwiń przejście nie działa z interfejsem użytkownika kątowego Bootstrap

Oto mój kod fiddle, w którym prawie dokładnie kopiuję ich kod (niewielka zmiana w celu podkreślenia składni html i linia do zadeklarowania mojej "aplikacji" w js).

Jak widać, nie działa tak, jak w przykładzie - nie ma przejścia. Dlaczego nie? Może potrzebna jest reguła przejścia css - ale czy to nie jest część tego, co dostarcza bootstrap.css?

dla potomności, odpowiednik plik html z skrzypce byłoby:

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.js"></script> 

</head> 
<body ng-app="my_app"> 
    <div ng-controller="CollapseDemoCtrl"> 
     <button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button> 
     <hr /> 
     <div collapse="isCollapsed"> 
      <div class="well well-lg">Some content</div> 
     </div> 
    </div> 
</body> 
</html>

oraz równoważne js byłoby:

var my_app = angular.module('my_app', ['ui.bootstrap']); 

my_app.controller('CollapseDemoCtrl', function ($scope) { 
    $scope.isCollapsed = false; 
});

Dzięki!

Źródło

2015-05-11 Edward Newell

I rzeczywiście wpadł na ten problem właśnie wczoraj. Rozwiązałem ten problem, obniżając klasyfikację ui-bootstrap do wersji 0.12.0. Myślę, że jest błąd 0.13.0, który sprawia, że animacja nie działa. – m0g

Wystarczy obniżyć wersję Ui-bootstrap do 0.12.0. W wersji 0.13.0 występuje błąd, który sprawia, że animacja nie działa.

<html> 
 
<head> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" /> 
 
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" /> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.0/ui-bootstrap.js"></script> 
 

 
</head> 
 
<body ng-app="my_app"> 
 
    <div ng-controller="CollapseDemoCtrl"> 
 
     <button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button> 
 
     <hr /> 
 
     <div collapse="isCollapsed"> 
 
      <div class="well well-lg">Some content</div> 
 
     </div> 
 
    </div> 
 
</body> 
 
</html>

JS może pozostać taka sama. Właśnie zmodyfikowałem wersję ui-bootstrap w kodzie HTML.

Oto aktualizowane skrzypce, a także - https://jsfiddle.net/xv7tws10/5/

Edycja: Patrz odpowiedź Premchandra jest poniżej. Najwyraźniej musisz włączyć animację ng, aby animacja zwijania działała w kanciastej wersji 1.3.

Źródło

2015-05-13 16:00:45 m0g

Aha. Nic wielkiego, jak sądzę. Dzięki! –

Zobacz odpowiedź Premchandry Singh. Potrzebujesz modułu ngAnimate do działania animacji. – Rockallite

Wydaje się, że istnieje limit wersji, aż do momentu, w którym przestanie się animować.

Oto, aby zobaczyć, jak działa, ale z najnowszymi wersjami będzie działać tylko z.

<html !DOCTYPE html> 
<head> 

<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet"> 

</head> 

<body ng-app="my_app"> 
<br> 
<div ng-controller="CollapseDemoCtrl"> 
    <button class="btn btn-default" ng-click="isCollapsed = !isCollapsed">Toggle collapse</button> 
    <hr /> 
    <div collapse="isCollapsed" > 
     <div class="well well-lg">Some content</div> 
    </div> 
</div> 

<script src="http://code.angularjs.org/1.2.28/angular.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.8.0/ui-bootstrap.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular-animate.min.js"></script> 

<script> 
angular.module('my_app', ['ngAnimate', 'ui.bootstrap']); 
function CollapseDemoCtrl($scope) { 
$scope.isCollapsed = false; 
} 
</script>  
</body> 
</html>

Źródło

2015-05-12 01:22:43 AngularJR

Tak, wygląda na to, że potrzebujesz konkretnej (nie najnowszej) wersji zarówno kątowej jak i bootstrap! Przekażę to! –

Właściwie, zobacz odpowiedź m0g ... –

Angulajs UI Bootstrap 0.13.0 Potrzebujesz modułu ngAnimate do animacji. Zarejestruj się NgAnimate to zadziała. issue

Original plnkr

Modified, animation working plnkr

Źródło

2015-05-26 10:38:59

Tak działa teraz (Angular 1.4) :) – olefrank

Praca dla Angular 1.5! – z3ntu