uniapp小案例---趣味打字坤

当点击输入框时出现小鸡打字

当输入框失焦时打字鸡沉下去

 原图自取

这里运用了一个三元 :class="isActive?'active':''"，当聚焦时isActive=true从而让class绑定，当失焦时isActive=false

<template><view class="out"><input type="text" @focus="isActive=true" @blur="isActive=false" placeholder="请输入用户名" /><image class="pic" :class="isActive?'active':''"  src="../../static/test/630ef32c0688d0bc83977e0344dda16c.gif"></image></view>
</template><script setup>import {ref} from "vue";const isActive=ref(false);</script><style lang="scss" scoped>.out{// background-color: darkgray;width: 100%;height: 100px;padding-top: 10px;input{background-color: #fff;margin-top: 20px;margin-left: 18px;width: 380px;height: 40px;border: 1px solid black;position: relative;z-index: 2;}.pic{width: 30px;height: 30px;// 相对于最近的定位祖先元素定位：position: absolute;top: 30px;// 混合单位运算left: calc(50% - 12px);z-index: 1;// 当top值发生变化时，平滑过度transition: top 0.3s;}.pic.active{top:5px;}}
</style>