angularjs - collapse transition not working with angular's UI Bootstrap -
i'm trying create div show / hide when button clicked. ui bootstrap page shows nice simple example uses css transition.
here's fiddle copy code, (slight change make html syntax highlighting work, , line declare "app" in js).
as can see, doesn't work in example -- there no transition. why not? maybe css transition rule needed -- isn't part of bootstrap.css provides?
for posterity, equivalent html file fiddle be:
<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> and equivalent .js be:
var my_app = angular.module('my_app', ['ui.bootstrap']); my_app.controller('collapsedemoctrl', function ($scope) { $scope.iscollapsed = false; }); thanks!
just downgrade ui-bootstrap version 0.12.0. there bug in 0.13.0 makes animation not work.
<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>the js can stay same. modified ui-bootstrap version in html code.
here updated fiddle - https://jsfiddle.net/xv7tws10/5/
edit: see premchandra's response below. apparently have include ng-animate in order collapse animation work in angular 1.3.
Comments
Post a Comment