Сбой перехода не работает с angular UI Bootstrap

Я пытаюсь создать div, который будет отображаться/скрываться при нажатии кнопки. На странице UI Bootstrap показан хороший простой пример, в котором используется переход css.

Здесь my fiddle, где я копирую свой код почти точно (небольшое изменение, чтобы сделать подсветку синтаксиса html, и строку, чтобы объявить мое "приложение" в js).

Как вы можете видеть, это не работает, как в примере - переход отсутствует. Почему нет? Возможно, требуется правило перехода css - но не является ли частью того, что обеспечивает bootstrap.css?

для потомков, эквивалентный html файл из скрипта будет выглядеть следующим образом:

<html>
<head>
    <link rel="stylesheet" type="text/css" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'; return false;" />
    <link rel="stylesheet" type="text/css" href="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css'; return false;" />
    <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>

и эквивалент .js будет:

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

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

Спасибо!

Ответы

Ответ 1

Просто снимите версию ui-bootstrap до 0.12.0. В 0.13.0 есть ошибка, из-за которой анимация не работает.

<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>

Ответ 3

Кажется, существует ограничение на версию до тех пор, пока это не остановится для анимации.

Вот Fiddle, чтобы увидеть, как он работает так, как вы этого хотите, но с новейшими версиями он будет работать только с.

<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>