我该如何解决聚焦输入动画覆盖svg图标的问题?

时间:2019-06-10 16:20:52

标签: html css animation svg

当焦点集中在搜索输入上时,搜索输入向左增长,并且没有覆盖在svg图标上。但是,重点放在输入上,它会向右缩小以覆盖svg图标。我想要的动画与专注于(要反转)而不覆盖svg图标的动画相同。我可以更早地开始使用背景色动画。但是我不想通过改变背景色动画时间来解决这个问题。我该怎么解决?

*,
*::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);
}
<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 个答案:

答案 0 :(得分:1)

这是一种方法。

在为文本输入添加动画时,不要依赖更改z-index。 而是将图标设置为pointer-events: none,以便单击将其传递到下面的文本框。

*,
*::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);
}
<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>