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>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/42708.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C语言:高级并发操作(信号)

引言 同步和异步的使用。 异步事件处理的两种方法&#xff1a;查询法、通知法。&#xff08;单核机器不存在异步&#xff09; 一、信号 1. 信号的概念 信号是软件中断。信号的响应依赖于中断。中断是底层硬件的机制。 2. signal函数 kill -l命令查看所有的信号。1 -31 属…

使用qt creator配置msvc环境(不需要安装shit一样的宇宙第一IDE vs的哈)

1. 背景 习惯使用Qt编程的童鞋&#xff0c;尤其是linux下开发Qt的童鞋一般都是使用qt creator作为首选IDE的&#xff0c;通常在windows上使用Qt用qt creator作为IDE的话一般编译器有mingw和msvc两种&#xff0c;使用mingw版本和在linux下的方式基本上一样十分简单&#xff0c;不…

如何在Ubuntu环境下使用加速器配置Docker环境

一、安装并打开加速器 这个要根据每个加速器的情况来安装并打开&#xff0c;一般是会开放一个代理端口&#xff0c;比如1087 二、安装Docker https://docs.docker.com/engine/install/debian/#install-using-the-convenience-script 三、配置Docker使用加速器 3.1 修改配置…

UE5 04-重新加载当前场景

给关卡加一个淡出的效果 给关卡加一个淡入的效果, 这个最好放置在Player 上,这样切关卡依然有这个效果

防火墙基础及登录(华为)

目录 防火墙概述防火墙发展进程包过滤防火墙代理防火墙状态检测防火墙UTM下一代防火墙&#xff08;NGFW&#xff09; 防火墙分类按物理特性划分软件防火墙硬件防火墙 按性能划分百兆级别和千兆级别 按防火墙结构划分单一主机防火墙路由集成式防火墙分布式防火墙 华为防火墙利用…

Qt 关于字节流可否嵌套的一个实验

1.可否嵌套方案 1.1 概要 * 需求&#xff1a;数据头数据体校验码数据尾 * 校验码的生成只与数据体相关 * 可否通过QByteArray的嵌套实现这个功能呢&#xff0c; * 最终失败&#xff1a; * 理由一个char*的整体内存是无法再头部插入输入的。 * 那么只能靠生成校验码的时候…

creature_equip_template

creature_equip_template CreatureID 链接 creature_template.entry ID creature 装备模板编号 一个 creature entry 可以有多个装备模板如有多个装备模板&#xff0c;从1开始依次递增1 ItemID1 - ItemID3 装备模板使用的装备id&#xff0c;取值参见 ItemSparse.db2 | Item.db2…

什么是数据分析?数据分析如何创造企业发挥价值?

数据分析是在具体的业务场景下&#xff0c;如何借助工具&#xff0c;通过数据解决问题的思路 数据底层的四大优势 1.可反复读取和使用 2.客观 3.量化 4.机器可处理 使用数据指导业务&#xff0c;基于数据量化生产 只要是基于量化的信息提升生产力&#xff0c;就是数据分析&a…

MySQL-18-mysql source 执行 sql 文件时中文乱码

拓展阅读 MySQL 00 View MySQL 01 Ruler mysql 日常开发规范 MySQL 02 truncate table 与 delete 清空表的区别和坑 MySQL 03 Expression 1 of ORDER BY clause is not in SELECT list,references column MySQL 04 EMOJI 表情与 UTF8MB4 的故事 MySQL 05 MySQL入门教程&a…

centos7|操作系统|升级openssl-1.0.2k到openssl-3.3.0

一、 前言&#xff1a; opensssl是什么软件&#xff1f;openssl的版本是怎样的&#xff1f;为什么需要升级openssl&#xff1f;如何升级openssl&#xff1f; 1、openssl是一个什么样软件&#xff1f; OpenSSL是一个开源的安全套接字层&#xff08;Secure Sockets Layer&…

MySQL8.0在windows下的下载安装及详细使用

下载mysql8.0二进制包 下载地址&#xff1a;MySQL :: Download MySQL Community Server 编辑my.ini配置文件 解压二进制包&#xff0c;新建/编辑my.ini配置文件(如果不存在则新建) [client] #客户端设置&#xff0c;即客户端默认的连接参数 # 设置mysql客户端连接服务端时…

Canvas:掌握颜色线条与图像文字设置

想象一下&#xff0c;用几行代码就能创造出如此逼真的图像和动画&#xff0c;仿佛将艺术与科技完美融合&#xff0c;前端开发的Canvas技术正是这个数字化时代中最具魔力的一环&#xff0c;它不仅仅是网页的一部分&#xff0c;更是一个无限创意的画布&#xff0c;一个让你的想象…

回溯 | Java | LeetCode 39, 40, 131 做题总结

Java Arrays.sort(数组) //排序 不讲究顺序的解答&#xff0c;都可以考虑一下排序是否可行。 39. 组合总和 错误解答 在写的时候需要注意&#xff0c;sum - candidates[i];很重要&#xff0c;也是回溯的一部分。 解答重复了。是因为回溯的for循环理解错了。 class Solutio…

Python StrEnum: 基本概念和使用场景

Python StrEnum: 基本概念和使用场景 什么是StrEnum?基本用法使用场景1. 配置选项2. API状态码3. 数据验证 注意事项结论 在Python编程中,枚举类型是一种非常有用的工具,可以用来定义一组命名常量。Python 3.4引入了Enum类,而在Python 3.11中,我们迎来了一个新的枚举类型 ——…

极域?去!

本文由Jzwalliser原创&#xff0c;发布在CSDN平台上&#xff0c;遵循CC 4.0 BY-SA协议。 因此&#xff0c;若需转载/引用本文&#xff0c;请注明作者并附原文链接&#xff0c;且禁止删除/修改本段文字。 违者必究&#xff0c;谢谢配合。 个人主页&#xff1a;blog.csdn.net/jzw…

使用OpenCV与PySide(PyQt)的视觉检测小项目练习

OpenCV 提供了丰富的图像处理和计算机视觉功能&#xff0c;可以实现各种复杂的图像处理任务&#xff0c;如目标检测、人脸识别、图像分割等。 PyQt(或PySide)是一个创建GUI应用程序的工具包&#xff0c;它是Python编程语言和Qt库的成功融合。Qt库是最强大的GUI库之一。Qt的快速…

【开放集目标检测】Grounding DINO

一、引言 论文&#xff1a; Grounding DINO: Grounding DINO: Marrying DINO with Grounded Pre-Training for Open-Set Object Detection 作者&#xff1a; IDEA 代码&#xff1a; Grounding DINO 注意&#xff1a; 该算法是在Swin Transformer、Deformable DETR、DINO基础上…

逆变器学习笔记(三)

DCDC电源芯片外围器件选型_dcdc的comp补偿-CSDN博客、 1.芯片的COMP引脚通常用于补偿网络&#xff1a; 芯片的COMP引脚通常用于补偿网络&#xff0c;在控制环路中发挥重要作用。COMP引脚接电容和电阻串联接地&#xff0c;主要是为了稳定控制环路、调整环路响应速度和滤波噪声…

Java 变量命名规则

在Java中&#xff0c;变量命名是一种重要的编码规范&#xff0c;良好的命名可以提高代码的可读性和维护性。以下是Java变量命名的规则和建议&#xff1a; ### Java变量命名规则&#xff1a; 1. **合法字符**&#xff1a; - 变量名可以包含字母、数字、美元符号 $ 和下划线…

java Lock接口

在 Java 中&#xff0c;Lock 接口的实现类ReentrantLock 类提供了比使用 synchronized 方法和代码块更广泛的锁定机制。 简单示例&#xff1a; import java.util.concurrent.locks.Lock; import java.util.concurrent.locks.ReentrantLock;public class ReentrantLockExampl…