html+css+JavaScript 实现两个输入框的反转动画

开发时遇到了一个输入框交换的动画

做完之后觉得页面上加些许过渡或动画，其变化虽小，却能极大的提升页面质感，给人一种顺畅、丝滑的视觉体验。它的实现过程主要是通过css中的transition和animation来实现的。平时在开发的时候增加一些动画效果会让页面的观赏度和用户体验提高。利用定位的方式脱离文本流之后通过改变位置来加css3的动画实现

<template><div class="input-box"><el-inputv-model="input1"placeholder="请输入内容"class="input1":class="{ 'site-position-bottom': isConversion }"></el-input><div class="line1"></div><el-button class="btn" type="primary" plain size="small" @click="conversionText"><i class="el-icon-sort"></i>反转</el-button><div class="line2"></div><el-inputv-model="input2"placeholder="请输入内容"class="input2":class="{ 'site-position-top': isConversion }"></el-input></div>
</template>
<script>
export default {data() {return {isConversion: false,input1: '',input2: ''};},methods: {conversionText() {this.isConversion = !this.isConversion;let temp = this.input1;this.input1 = this.input2;this.input2 = temp;setTimeout(() => {this.isConversion = !this.isConversion;}, 600);}}
};
</script>
<style lang="scss" scoped>
.input-box {position: relative;height: 100%;background-color: #fff;
}
.input1 {width: 200px;position: absolute;top: 20px;
}
.btn {position: absolute;top: 62px;left: 230px;
}
.input2 {width: 200px;position: absolute;top: 100px;
}
.line1 {width: 56px;height: 20px;position: absolute;top: 35px;left: 210px;border-top: 1px solid #ccc;border-right: 1px solid #ccc;
}
.line2 {width: 56px;height: 20px;position: absolute;top: 100px;left: 210px;border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;
}
.site-position-top {animation: topPosition 0.6s ease-in-out;
}
.site-position-bottom {animation: bottomPosition 0.6s ease-in-out;
}
@keyframes topPosition {0% {top: 20px;}40% {opacity: 0;}80% {opacity: 0.8;}100% {top: 100px;opacity: 1;}
}
@keyframes bottomPosition {0% {top: 100px;}40% {opacity: 0;}80% {opacity: 0.8;}100% {top: 20px;opacity: 1;}
}
</style>

如果这篇文章对你有所帮助，欢迎点赞、分享和留言，让更多的人受益。感谢你的细心阅读，如果你发现了任何错误或需要补充的地方，请随时告诉我，我会尽快处理。