文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >如何解决焦点输出输入动画覆盖svg图标的问题？

问如何解决焦点输出输入动画覆盖svg图标的问题？
EN

Stack Overflow用户
提问于 2019-06-11 00:20:52
回答 1查看 81关注 0票数 1

当聚焦于搜索输入时，搜索输入会向左增长，并且不会覆盖在svg图标上。但是，聚焦输入正在缩小到覆盖svg图标的右侧。我希望在不覆盖svg图标的情况下，使用与聚焦相同的动画(反转)。我可以早点开始背景色动画。但是我不想通过改变背景颜色动画时间来解决这个问题。我该怎么解决它呢？

​

代码语言：javascript
复制
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

.wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  height: 5rem;
  width: 100%;
  background-color: orangered;
  background: #6f42c1;
  background: linear-gradient(30deg, #6f42c1 35%, #6610f2 75%, #007bff 100%);
  box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.75);
  margin-top:5rem;
}

.search-3 {
  margin-right: 2rem;
  display: inline-block;
  position: relative;
  height: 3rem;
  width: 0;
}
.search-3__text {
  display: inline-block;
  height: 3rem;
  width: 3rem;
  background-color: transparent;
  border: none;
  outline: none;
  border-radius: 2px;
  font-family: "Roboto Slab", serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #000;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
  cursor: pointer;
  transition: width 0.4s cubic-bezier(0, 0.795, 0, 1) 0s, background-color 0.2s ease-out 0.4s;
}
.search-3__text::placeholder {
  color: transparent;
  font-size: 1.5rem;
  font-weight: 300;
  font-style: italic;
  transition: color 0s ease-in-out 0s;
}
.search-3__text:focus {
  width: 50rem;
  z-index: 3;
  cursor: text;
  background-color: #fff;
  transition: width 0.4s cubic-bezier(0, 0.795, 0, 1) 0.2s, background-color 0.2s ease-in-out 0s;
}
.search-3__text:focus::placeholder {
  color: #000;
  transition: color 0.2s ease-in-out 0.5s;
}
.search-3__icon {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  cursor: pointer;
}
.search-3__icon svg {
  display: inline-block;
  height: 2rem;
  width: 2rem;
  color: #000;
  filter: drop-shadow(2px 1px 1px #7A8288);
}
代码语言：javascript
复制
<head>  
  <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,400i,700&amp;subset=latin-ext" rel="stylesheet">
</head>

<body>
  <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <symbol id="icon-search" viewBox="0 0 26 28">
        <title>search</title>
        <path d="M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zM26 26c0 1.094-0.906 2-2 2-0.531 0-1.047-0.219-1.406-0.594l-5.359-5.344c-1.828 1.266-4.016 1.937-6.234 1.937-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-0.672 4.406-1.937 6.234l5.359 5.359c0.359 0.359 0.578 0.875 0.578 1.406z">
        </path>
      </symbol>
    </defs>
  </svg>

  <div class="wrap">
    <form class="search-3" action="" autocomplete="on">
      <input class="search-3__text" id="search-3" name="search-3" type="text" placeholder="Sitede ara.." page_search onfocusout="if(this.value !=''){this.value='';}">
      <span class="search-3__icon">
        <svg>
          <use xlink:href="#icon-search" />
         </svg>
      </span>
    </form>
  </div>
</body>

​

html
css
animation
svg
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-06-11 01:10:58

这里有一种方法。

在设置文本输入动画时，不要依赖于更改z-index。相反，将图标设置为pointer-events: none，以便单击通过它到达下面的文本框。

​

代码语言：javascript
复制
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  line-height: 1.6;
}

.wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  height: 5rem;
  width: 100%;
  background-color: orangered;
  background: #6f42c1;
  background: linear-gradient(30deg, #6f42c1 35%, #6610f2 75%, #007bff 100%);
  box-shadow: 0px 5px 5px -5px rgba(0, 0, 0, 0.75);
  margin-top:5rem;
}

.search-3 {
  margin-right: 2rem;
  display: inline-block;
  position: relative;
  height: 3rem;
  width: 0;
}
.search-3__text {
  display: inline-block;
  height: 3rem;
  width: 3rem;
  background-color: transparent;
  border: none;
  outline: none;
  border-radius: 2px;
  font-family: "Roboto Slab", serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #000;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  transition: width 0.4s cubic-bezier(0, 0.795, 0, 1) 0s, background-color 0.2s ease-out 0.4s;
}
.search-3__text::placeholder {
  color: transparent;
  font-size: 1.5rem;
  font-weight: 300;
  font-style: italic;
  transition: color 0s ease-in-out 0s;
}
.search-3__text:focus {
  width: 50rem;
  cursor: text;
  background-color: #fff;
  transition: width 0.4s cubic-bezier(0, 0.795, 0, 1) 0.2s, background-color 0.2s ease-in-out 0s;
}
.search-3__text:focus::placeholder {
  color: #000;
  transition: color 0.2s ease-in-out 0.5s;
}
.search-3__icon {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  height: 3rem;
  width: 3rem;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  pointer-events: none;
}
.search-3__icon svg {
  display: inline-block;
  height: 2rem;
  width: 2rem;
  color: #000;
  filter: drop-shadow(2px 1px 1px #7A8288);
}
代码语言：javascript
复制
<head>  
  <link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700|Roboto:400,400i,700&amp;subset=latin-ext" rel="stylesheet">
</head>

<body>
  <svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <symbol id="icon-search" viewBox="0 0 26 28">
        <title>search</title>
        <path d="M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zM26 26c0 1.094-0.906 2-2 2-0.531 0-1.047-0.219-1.406-0.594l-5.359-5.344c-1.828 1.266-4.016 1.937-6.234 1.937-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-0.672 4.406-1.937 6.234l5.359 5.359c0.359 0.359 0.578 0.875 0.578 1.406z">
        </path>
      </symbol>
    </defs>
  </svg>

  <div class="wrap">
    <form class="search-3" action="" autocomplete="on">
      <input class="search-3__text" id="search-3" name="search-3" type="text" placeholder="Sitede ara.." page_search onfocusout="if(this.value !=''){this.value='';}">
      <span class="search-3__icon">
        <svg>
          <use xlink:href="#icon-search" />
         </svg>
      </span>
    </form>
  </div>
</body>

​

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/56530042

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档