首頁(yè) 猿問(wèn) css點(diǎn)擊搜索...

css點(diǎn)擊搜索輸入框從右到左出現(xiàn)，關(guān)閉時(shí)從左到右隱藏怎么實(shí)現(xiàn)？

JavaScript

慕尼黑8549860 2019-03-09 15:58:30

如圖樣式，點(diǎn)擊搜索的時(shí)候輸入框從右到左慢慢展開(kāi)，關(guān)閉時(shí) 輸入框從左到右慢慢關(guān)閉，請(qǐng)求動(dòng)畫(huà)怎么實(shí)現(xiàn)？謝謝

查看完整描述

2 回答

繁星coding

TA貢獻(xiàn)1797條經(jīng)驗(yàn) 獲得超4個(gè)贊

 // css
 * {      margin: 0;
      padding: 0;
      -webkit-tap-highlight-color: transparent;
    }

    .open .inp {      width: 30%;
    }

    .inp {      transition: width 0.65s linear;
      width: 15%;
      position: absolute;
      right: 10px;
    }

    .inp_txt {      width: 100%;
    }     
    // html
    <div class="box">    <div class="inp">
      <input class="inp_txt" type="text">
    </div>
  </div>

 //js
 window.$ = window.$ || function (el) {      var d = document;      if (typeof el == 'string') {
        el = el.indexOf('.') != -1 ? d.getElementsByClassName(el.replace(/\./, '')) :
          el.indexOf('#') != -1 ? d.getElementById(el.replace(/\#/, '')) :
            d.querySelector(el);
      }      return el;
    }

    $('.inp_txt')[0].onfocus = function () {
      $('.box')[0].className += ' open';
    }

    $('.inp_txt')[0].onblur = function () {      var el = $('.box')[0];
      el.className = el.className.replace(/\s+open/, '');
    }

反對(duì) 回復(fù) 2019-03-09