可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):
问题:
I'm trying to create a div which will show / hide when a button is clicked. The UI Bootstrap page shows a nice simple example that uses a css transition.
Here's my fiddle where I copy their code, almost exactly (slight change to make html syntax highlighting work, and a line to declare my "app" in the js).
As you can see, it doesn't work as in the example -- there is no transition. Why not? Maybe a css transition rule is needed -- but isn't that part of what bootstrap.css provides?
for posterity, the equivalent html file from the fiddle would 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 the equivalent .js would be:
var my_app = angular.module('my_app', ['ui.bootstrap']); my_app.controller('CollapseDemoCtrl', function ($scope) { $scope.isCollapsed = false; });
Thanks!
回答1:
Just downgrade the ui-bootstrap version to 0.12.0. There is a bug in 0.13.0 that makes the 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 the same. I just modified the ui-bootstrap version in the html code.
Here is the updated fiddle as well - https://jsfiddle.net/xv7tws10/5/
Edit: See Premchandra's response below. Apparently you have to include ng-animate in order to get collapse animation to work in angular 1.3.
回答2:
Angulajs UI Bootstrap 0.13.0 need ngAnimate module for animation. Register ngAnimate it will work. issue
Original plnkr
Modified, animation working plnkr
回答3:
There seems to be a version limit up until where this stops to animate.
Here is a Fiddle to see it working as you want it to, but with the newest versions it will only work with.
<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>
