<template>
	<view class="content flex a-center j-center" v-if="urls">
		<image :class="[urls ? 'anima' : '']" :src="urls" style="width: 94rpx;" mode="widthFix"></image>
	</view>
</template>

<script>
	export default {
		name:"special",
		props:["url"],
		data() {
			return {
				urls:'',
			};
		},
		watch:{
			url:function(newValue,oldValue){
				this.urls = newValue
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		position: absolute;
		top:50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: 100;
	}
	@keyframes identifier {
		0%{
			display: inline-block;
		}
		50%{
			transform: scale(5);
		}
		100%{
			transform: scale(5);
			opacity: 0;
			display: none;
		}
	}
	.anima{
		animation: identifier 1s;
	}
</style>