<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div.circular{
width: 100px;
height: 100px;
background: red;
border-radius: 50%;
margin-top: 20px;
text-align: center;
line-height: 100px;
color: #FFf;
}
.bounce-enter-active{
animation: Ami .5s;
}
.bounce-leave-active{
animation: Ami .5s;
}
@keyframes Ami {
0%{transform: scale(0);background: #FF0000;}
20%{transform: scale(1);background: #aa00ff;}
50%{transform: scale(1.5);background: #0055ff;}
100%{transform: scale(1);background: #aa00ff;}
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<button @click="show=!show">使用@keyframes创建css动画</button>
<transition name="bounce">
<div class="circular" v-if="show">圆
</div>
</transition>
</div>
<script>
var vm=new Vue({
el:'#app',
data:{show:ture},
})
</script>
</body>
</html>
找不到错误所处，点击button但实现动画，只是静态的一个圆，请求大神帮助。
