首页 > Angular中ngAnimate遇到的问题

Angular中ngAnimate遇到的问题

用ngAnimate做动画效果,比如:

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>    
    <style>
        .animateMe.grown-add,
        .animateMe.grown-remove {
            transition: 2s linear all;
            -webkit-transition: 2s linear all;
        }    
        .grown {
            font-size: 50px;
        }    
        .animateMe.grown-add {
            font-size: 16px;
        }    
            .animateMe.grown-add.grown-add-active {
                font-size: 50px;
            }    
        .animateMe.grown-remove {
        }    
            .animateMe.grown-remove.grown-remove-active {
                font-size: 16px;
            }
    </style>
</head>
<body ng-app="myApp">
    <div ng-controller="HomeController">
        <button ng-click="grow=!grow">Grow</button>
        <div ng-class="{grown:grow}"
             class="animateMe">
            <h2>Grow me</h2>
        </div>
    </div>
</body>
</html>
<script src="Assets/Labs/angular.min.js"></script>
<script src="Assets/Labs/angular-animate.min.js"></script>
<script>
    var app = angular.module('myApp', ['ngAnimate']);
    app.controller('HomeController', function ($scope) {
        $scope.grow = false;
    });
</script>

这么写动画效果是没问题的,但是如果我在<head>中加入bootstrap.min.css之后,动画效果就没有了。
我把.animateMe和.grown名称改了也没有用,方式改成"app.animation('.animateMe', function() {return {}});"这种形式也没有用,而我还需要bootstrap。
angular-ui-bootstrap和AngularStrap这两个框架也是基于bootstrap的啊,为什么我的只要有bootstrap.min.css在就没有动画效果呢,请问各位大神这怎么解决?


你的问题在于你用了h2标签,bootstrap定义了h2的字体大小,优先级要比你的grown定义的要高,所以动画试图改变字体大小就不起作用了,只要别用h2,换个span立马就好了,

给你demo:jsFiddle

【热门文章】
【热门文章】