l'effondrement de la transition de ne pas travailler avec angulaire de l'INTERFACE utilisateur de Bootstrap

Je suis en train de créer une div qui va montrer /cacher quand on clique sur un bouton. Le UI Bootstrap page montre un bel exemple simple qui utilise une transition css.

Voici mon violon où j'ai copier le code, presque exactement (légère modification à faire de la syntaxe html, mettant en évidence le travail, et une ligne de déclarer mes "app" dans le js).

Comme vous pouvez le voir, il ne fonctionne pas comme dans l'exemple -- il n'y a pas de transition. Pourquoi pas? Peut-être un css règle de transition est nécessaire-mais il n'est pas qu'une partie de ce bootstrap.css?

pour la postérité, l'équivalent fichier html à partir du violon serait:

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

et l'équivalent .js serait:

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

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

Merci!

J'ai effectivement rencontré ce problème depuis hier. J'ai résolu ce problème par la dégradation de l'interface utilisateur-bootstrap à la version 0.12.0. Je pense qu'il y a un bug est 0.13.0 qui fait de l'animation fonctionne pas.

OriginalL'auteur Edward Newell | 2015-05-11

  1. 39

    Angulajs UI Bootstrap 0.13.0 besoin ngAnimate module pour l'animation. Registre ngAnimate il va travailler. question

    Original plnkr

    Modifié, animation de travail plnkr

    Yep fonctionne maintenant (Angulaire 1.4) 🙂
    De travail Angulaire 1.5!

    OriginalL'auteur Premchandra Singh

  2. 2

    Il semble y avoir une version limite jusqu'où cela s'arrête à animer.

    Ici est un Violon de voir qu'il fonctionne comme vous le souhaitez, mais avec les nouvelles versions, il ne fonctionne qu'avec.

    <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>
    Ouais, on dirait que vous avez besoin de (non-dernière) version à la fois anguleux et bootstrap! Je vais passer sur ce!
    En fait, voir m0g de réponse...

    OriginalL'auteur AngularJR