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

news2024/11/13 8:58:38

开发时遇到了一个输入框交换的动画
在这里插入图片描述

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

<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>

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

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

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

相关文章

Spring源码十六:Bean实例化入口探索

上一篇Spring源码十六&#xff1a;Bean名称转化我们讨论doGetBean的第一个方法transformedBeanName方法&#xff0c;了解Spring是如何处理特殊的beanName&#xff08;带&符号前缀&#xff09;与Spring的别名机制。今天我们继续往方法下面看&#xff1a; doGetBean 这个方法…

zabbix 与 grafana 对接

一.安装 grafana 1.初始化操作 初始化操作 systemctl disable --now firewalld setenforce 0 vim /etc/selinux/config SELINUXdisabled 2.上传数据包并安装 cd /opt grafana-enterprise-9.4.7-1.x86_64.rpm #上传软件包 yum localinstall -y grafana-enterprise-9.4.7-1…

Ubuntu编译 OSG

目录 一、安装步骤 二、配置 1、数据文件配置 2、OSG环境变量配置 一、安装步骤 在Ubuntu上安装OSG(OpenSceneGraph),你可以按照以下步骤操作: 打开终端,更新你的包管理器的包列表: sudo apt update 安装必要的依赖库 sudo apt install libglu1-mesa-dev freeglu…

java IO流(1)

一. 文件类 java中提供了一个File类来表示一个文件或目录(文件夹),并提供了一些方法可以操作该文件 1. 文件类的常用方法 File(String pathname)构造方法,里面传一个路径名,用来表示一个文件boolean canRead()判断文件是否是可读文件boolean canWrite()判断文件是否是可写文…

18_特征金字塔网络FPN结构详解

1.1 简介 在深度学习领域&#xff0c;尤其是计算机视觉和目标检测任务中&#xff0c;Feature Pyramid Networks (FPN) 是一种革命性的架构设计&#xff0c;它解决了多尺度特征检测和融合的关键问题。FPN最初由何凯明等人在2017年的论文《Feature Pyramid Networks for Object …

阿里云ecs服务器,nginx多域名多项目部署教程,含本地部署教程

nginx多域名部署项目 本地部署线上部署一、本地部署 第一步:win+r 输入drivers 打开hosts文件,编辑 加行 127.0.0.1 自定义域名 … 第二步:下载 nginx 安装好以后 打开ngin安装目录,选择nginx.conf 打开 #user Administrator; worker_processes

【python技巧】parser传入参数

参考网址: https://lightning.ai/docs/pytorch/LTS/api/pytorch_lightning.utilities.argparse.html#pytorch_lightning.utilities.argparse.add_argparse_args 1. 简单传入参数. parse_known_args()方法的作用就是把不在预设属性里的参数也返回,比如下面这个例子, 执行pytho…

前端技术(三)—— javasctipt 介绍:jQuery方法和点击事件介绍(补充)

6. 常用方法 ● addClass() 为jQuery对象添加一个或多个class <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0">&…

【密码学】什么是密码?什么是密码学?

一、密码的定义 根据《中华人民共和国密码法》对密码的定义如下&#xff1a; 密码是指采用特定变换的方法对信息等进行加密保护、安全认证的技术、产品和服务。 二、密码学的定义 密码学是研究编制密码和破译密码的技术科学。由定义可以知道密码学分为两个主要分支&#x…

【UML用户指南】-30-对体系结构建模-模式和框架

目录 1、机制 2、框架 3、常用建模技术 3.1、对设计模式建模 3.2、对体系结构模式建模 用模式来详述形成系统体系结构的机制和框架。通过清晰地标识模式的槽、标签、按钮和刻度盘 在UML中&#xff0c; 对设计模式&#xff08;也叫做机制&#xff09;建模&#xff0c;将它…

前端必修技能:高手进阶核心知识分享 - CSS 阴影属性详解

CSS 涉及设计到阴影的相关内容包括三个方面&#xff1a;box-shadow属性&#xff08;盒子阴影&#xff09;、 text-shadow属性&#xff08;文本阴影&#xff09;、drop-shadow滤镜。 本篇文章旨在详细介绍和分析三种阴影的具体参数设置和典型用例。 box-shadow属性&#xff08;…

1958.力扣每日一题7/7 Java(100%解)

博客主页&#xff1a;音符犹如代码系列专栏&#xff1a;算法练习关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 目录 思路 解题方法 时间复杂度 空间复杂度 Code 思路 首先将指定位…

【ubuntu中关于驱动得问题】—— 如何将nouveau驱动程序加入黑名单和安装NVIDIA显卡驱动

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、nouveau驱动程序加入黑名单二、安装NVIDIA显卡驱动总结 前言 NVIDIA显卡驱动是用于支持和优化NVIDIA显卡在计算机系统中运行的关键软件组件。该驱动程序能…

2024 WAIC|第四范式胡时伟分享通往AGI之路:行业大模型汇聚成海

7月4日&#xff0c;2024世界人工智能大会&#xff08;WAIC&#xff09;正式开幕。此次大会围绕核心技术、智能终端、应用赋能等板块展开&#xff0c;展览规模、参展企业数均达历史最高。第四范式受邀参展&#xff0c;集中展示公司十年来在行业大模型产业应用方面的实践。在当天…

Django 查询数据

模型参考上一章内容&#xff1a; Django QuerySet对象&#xff0c;filter()方法-CSDN博客 查询数据可以通过以下方法&#xff1a; Book.objects.all() Book.objects.filter() Book.objects.get() 1&#xff0c;添加视图函数 Test/app11/views.py from django.shortcuts im…

【QT中堆栈布局的实现】

学习分享 1、环境设置&#xff0c;头文件2、.h文件2.1、主界面.h文件2.2、对话界面1.h文件2.3、对话界面2.h文件 3、.cpp文件3.1、对话界面1.cpp3.2、对话界面2.cpp3.3、主界面.cpp3.4、main.cpp 1、环境设置&#xff0c;头文件 该示例使用C14实现&#xff0c;因此在QT项目pro文…

实战:搭建一款属于自己的个人知识库~docusaurus(强大且丝滑)-2024.7.7(测试成功)

目录 文章目录 目录docusaurus简介效果专题链接&#x1f44f;环境源码1、安装基础环境2、拉取代码3、安装坚果云并同步md核心文件4、构建运行5、配置脚本环境1.配置vscode终端到ecs的免密2.配置win10 vscode终端环境变量 6、构建并推送静态文件到ecs关于我最后最后 docusaurus简…

基于CentOS Stream 9平台搭建RabbitMQ3.13.4以及开机自启

1. erlang与RabbitMQ对应版本参考&#xff1a;https://www.rabbitmq.com/which-erlang.html 2. 安装erlang 官网&#xff1a;https://www.erlang.org/downloads GitHub: https://github.com/rabbitmq/erlang-rpm/releases 2.1 安装依赖&#xff1a; yum -y install gcc glib…

BigDecimal(double)和BigDecimal(String)有什么区别?BigDecimal如何精确计数?

BigDecimal(double)和BigDecimal(String)的区别 double是不精确的&#xff0c;所以使用一个不精确的数字来创建BigDecimal&#xff0c;得到的数字也是不精确的。如0.1这个数字&#xff0c;double只能表示他的近似值。所以&#xff0c;当我们使用new BigDecimal(0.1)创建一个Bi…

算法简介:什么是算法?——定义、历史与应用详解

引言 在现代计算机科学中&#xff0c;算法是一个核心概念。无论是编程还是数据分析&#xff0c;算法都扮演着至关重要的角色。在这篇博客中&#xff0c;我们将深入探讨算法的定义、历史背景以及它在计算机科学中的地位和实际应用。 什么是算法&#xff1f; 算法是解决特定问题…