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

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

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

javascript 复制代码
<template>
  <div class="input-box">
    <el-input
      v-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-input
      v-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>

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

相关推荐
fruge1 分钟前
Vue 3 完全指南:响应式原理、组合式 API 与实战优化
javascript·vue.js·ecmascript
Aoda15 分钟前
从痛点到落地:PawHaven 的 Monorepo 架构设计
前端·javascript
幸运小圣16 分钟前
Set数据结构【ES6】
javascript·数据结构·es6
zxg_神说要有光25 分钟前
我好像找到了最适合我的生活状态
前端·javascript
爱上妖精的尾巴1 小时前
5-22 WPS JS宏reduce数组的归并迭代应用(实例:提取最大最小值的记录)
服务器·前端·javascript·笔记·wps·js宏
孤客网络科技工作室1 小时前
Python - 100天从新手到大师:第五十七天获取网络资源及解析HTML页面
开发语言·python·html
MyFreeIT3 小时前
Page光标focus在某个控件
前端·javascript·vue.js
通往曙光的路上3 小时前
day8_elementPlus
前端·javascript·vue.js
Jeffrey__Lin3 小时前
解决ElementPlus使用ElMessageBox.confirm,出现层级低于el-table的问题
前端·javascript·elementui·vue·elementplus
Miketutu3 小时前
vxe-table编辑模式适配el-date-picker
javascript·vue.js·elementui