使用@keyframes创建css动画

<!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但实现动画，只是静态的一个圆，请求大神帮助。

应该是true不是ture

true拼写错误 data:{show:true},

是true不是ture，思维习惯，很难发现的。

您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！

速戳参与调研>>>https://t.csdnimg.cn/Kf0y