0
Video of the problem（問題のアニメーションはオレンジです）。CSSの遷移は、右から左にではなく、左から右に移動します
検索アイコンが押されたときに、検索ボックスが右から全幅にスライドすることが起こります。最終的に（コード化すると）、ユーザーが検索ボックスから離れたときに再び画面の右側にスライドして閉じます。
CODE：
$(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();
// });
// }@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;
}<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>
'mySearch' div /要素に' float：right'を付けてみてください。 – divy3993
こちらをご確認くださいhttps://bootsnipp.com/snippets/featured/slider-search-box – AdhershMNair