极客观点
项目管理
HarmonyOS
用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