CSS 伸缩动画输入框_动画伸缩input输入框

<template>
	<!-- 定义一个视图容器，其中包含一个输入框、提示文字及一个底部线条动画 -->
	<view class="box">
		<view class="inputbox">
			<!-- 创建一个文本输入框，并在点击时触发input事件 -->
			<input type="text" @click="input">
			<!-- 动态显示用户名提示文字，位置和颜色随isclcha状态变化 -->
			<text 
				:style="{ 
					transform: isclcha ? 'translateX(0px) translateY(-34px)' : 'translateX(0px) translateY(0px)', 
					color: isclcha ? '#45f3ff' : '#8f8f8f' 
				}">用户名</text>
			<!-- 创建一个用于实现动画效果的伪元素，高度随isclcha状态变化 -->
			<i :style="{ height: isclcha ? '44px' : '2px' }"></i>
		</view>
	</view>
</template>
 
<script>
	export default {
		// 定义组件的数据对象，初始设置isclcha为false
		data() {