Question

正在发生的

Video of the problem（相关动画为橙色）。

应该发生的是，当按下搜索图标时，搜索框将从右侧向外滑动，直至其为全宽。最终（当我编码时）当用户从搜索框中取消对象时，它将再次关闭滑回屏幕的右侧。

代码：

＆＃13;

$(document).ready(function() {
  $('#mySearch').addClass('mySearchHidden');
  // $('#search').hide();
});

$('#myTouchSearch').click(function() {
  $('#mySearch').removeClass('mySearchHidden');
  $('#mySearch').addClass('mySearchVisible');
});









// $('#search').animate({width: 100+'%'}, 500);
// if ($('#mySearch').hasClass('mySearchOpen')) {
//   $('#mySearch').show();
//   $('#mySearch').transition({x: '+=100%'}, 500, 'ease');
//   $('#search').focus();
// } else {
//   $('#mySearch').transition({x: '+= -100%'}, 500, 'ease');
//   $('#mySearch').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',
//     function(e) {
//       $('#mySearch').hide();
//     });
// }

＆＃13;

@import url("colors.var.css");
html {
  /*background-color: #212121;*/
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

#myNav-title {
  font-weight: bold;
  font-size: 64px;
  margin: auto;
  padding: 25px;
  background-color: #ef5350;
  -webkit-transition: all 0.1s ease;
  -moz-transition: all 0.1s ease;
  -o-transition: all 0.1s ease;
  transition: all 0.1s ease;
}

.shrink {
  padding: 0 !important;
  font-size: 48px !important;
  box-shadow: none !important;
}

input[type="search"] {
  height: 64px !important;
}

.input-field input[type=search] {
  display: block;
  line-height: inherit;
  padding-left: 1rem;
  width: 17rem;
}

#mySearch {
  display: inline-block;

  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 1s ease;
}

.mySearchHidden {
  max-width: 0 !important;
}

.mySearchVisible {
  max-width: 100% !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <!--Import Google Icon Font-->
  <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <!--Import materialize.css-->
  <link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />

  <!--Tell browser website is optimized for mobile-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <!-- Import index.css for custom styles-->
  <link href="css/index.css" rel="stylesheet">
  <title>Waukesha South High School</title>
</head>

<body>
  <div class="navbar-fixed">
    <nav>
      <div class="nav-wrapper red lighten-1">
        <p id="myNav-title" class="brand-logo center z-depth-3 myNav-titleShort">SOUTH</p>
        <ul class="right">
          <li><a class="waves-effect"><i class="material-icons unselectable">people</i></a></li>
          <li><a id="myTouchSearch" class="waves-effect"><i class="material-icons unselectable">search</i></a></li>
          <li>
            <div class="input-field active orange" id="mySearch">
              <input id="search" type="search" required>
              <i class="material-icons">close</i>
            </div>
          </li>
        </ul>
      </div>
    </nav>
  </div>



  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <!--Scripts-->
  <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  <script type="text/javascript" src="js/jquery.transit.min.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>
  <script type="text/javascript" src="js/scrollNav.js"></script>
  <script type="text/javascript" src="js/searchBar.js"></script>
</body>

</html>

＆＃13;

Answer 1

您可以仅使用CSS为宽度设置动画。我已创建a FIDDLE进行演示，包括再次关闭搜索框。

CSS转换从左到右而不是从右到左

1 个答案: