angularjs - modal - la transición de colapso no funciona con la IU Bootstrap de angular
ui bootstrap angularjs (3)
Estoy intentando crear un div que se mostrará / ocultará cuando se haga clic en un botón. La página UI Bootstrap muestra un buen ejemplo simple que utiliza una transición css.
Aquí está mi fiddle donde copio su código, casi exactamente (un ligero cambio para hacer que el resaltado de sintaxis html funcione, y una línea para declarar mi "aplicación" en el js).
Como puede ver, no funciona como en el ejemplo, no hay transición. Por qué no? Tal vez se necesita una regla de transición css, pero ¿no es eso parte de lo que proporciona bootstrap.css?
para la posteridad, el archivo html equivalente del violín serí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.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>
y el equivalente .js sería:
var my_app = angular.module(''my_app'', [''ui.bootstrap'']);
my_app.controller(''CollapseDemoCtrl'', function ($scope) {
$scope.isCollapsed = false;
});
¡Gracias!
Angulajs UI Bootstrap 0.13.0 necesita ngAnimate módulo para la animación. Registro ngAnimate funcionará. issue
Parece que hay un límite de versión hasta donde esto se detiene para animar.
Aquí hay un Fiddle para ver cómo funciona como lo deseas, pero con las versiones más recientes solo funcionará.
<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>
Solo baja la versión de ui-bootstrap a 0.12.0. Hay un error en 0.13.0 que hace que la animación no funcione.
<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>
El JS puede permanecer igual. Acabo de modificar la versión de ui-bootstrap en el código html.
Aquí también se encuentra el fiddle actualizado: https://jsfiddle.net/xv7tws10/5/
Edición: Ver la respuesta de Premchandra a continuación. Aparentemente tienes que incluir ng-animate para que la animación de colapso funcione en angular 1.3.