Likes and comments

<template>
	<view class="">
		<view class="" style="display: flex;justify-content: space-between;">
			<view class="">
				时间
			</view>
			<view style="display: flex;">
				<view style="color:white" :class="flag? 'move-left':''">评论和点赞</view>
				<view class="btn" @click="btn">按钮</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
    
    
		name: "",
		data() {
    
    
			return {
    
    
				flag: false
			}
		},
		methods: {
    
    
			btn() {
    
    
				this.flag = !this.flag
			}
		},
	}
</script>

<style>
	.btn {
    
    
		z-index: 3;
		background-color: white;
	}

	.move-left {
    
    
		transform: translate(200rpx);
		animation: mymove 0.1s;
		color: white;
		background-color: gray;
		animation-fill-mode: forwards;
	}

	@keyframes mymove {
    
    
		to {
    
    
			transform: translate(0rpx);
		}
	}
</style>