Javascript FlexBox和动画有问题吗

我正在尝试在网站（这仍然是一个项目）上设置搜索栏的动画。动画可以工作，但当动画开始时，搜索输入只是传送自己：

我在动画中使用jQuery，只是因为我想在单击它时做其他事情，比如隐藏徽标和类似的事情。这是我的密码：

$（“.search field”）.focus（函数（）{
$（this.animate（{“width”：“100%”}，“slow”）；
//$（“.logo”）.fadeOut（）；
});
$（“.search field”）.focusout（函数（）{
$（this.animate（{“width”：“130px”}，“slow”）；
//$（“.logo”）.fadeIn（）；
});
@导入url（'https://fonts.googleapis.com/css?family=Roboto+板'）；
/*! HTML5样板文件v5.3.0 | MIT许可证|https://html5boilerplate.com/ */
/*
*下面是对跨浏览器样式的大量研究的结果。
*感谢Nicolas Gallagher Jonathan Neal，
*Kroc Camen以及H5BP开发社区和团队。
*/
/* ==========================================================================
基本风格：固执己见的默认设置
========================================================================== */
html{
颜色：#222；
字号：1em；
线高：1.4；
z指数：1；
}
/*
*删除选择突出显示中的文本阴影：
* https://twitter.com/miketaylr/status/12228805301
*
*这些选择规则集必须是独立的。
*自定义背景色以匹配您的设计。
*/
：-moz选择{
背景：#b3d4fc；
文本阴影：无；
}
：：选择{
背景：#b3d4fc；
文本阴影：无；
}
/*
*外观更好的默认水平规则
*/
人力资源{
显示：块；
高度：1px；
边界：0；
边框顶部：1px实心#ccc；
利润率：1米0；
填充：0；
}
/*
*消除音频、画布、iFrame之间的间隙，
*图像、视频及其容器底部：
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
音频
帆布，
iframe，
img，
svg，
录像带{
垂直对齐：中间对齐；
}
/*
*删除默认字段集样式。
*/
字段集{
边界：0；
保证金：0；
填充：0；
}
/*
*仅允许垂直调整文本区域的大小。
*/
文本区{
调整大小：垂直；
}
/* ==========================================================================
浏览器升级提示
========================================================================== */
.浏览器升级{
边际：0.2米0；
背景：#ccc；
颜色：#000；
填充：0.2米0；
}
/* ==========================================================================
作者的自定义样式
========================================================================== */
/* ==========================================================================
助手类
========================================================================== */
/*
*对屏幕阅读器进行可视和隐藏
*/
.隐藏{
显示：无！重要；
}
/*
*仅在视觉上隐藏，但可供屏幕阅读器使用：
* http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*/
.视觉隐藏{
边界：0；
剪辑：rect（0）；
高度：1px；
保证金：-1px；
溢出：隐藏；
填充：0；
位置：绝对位置；
宽度：1px；
}
/*
*扩展.visuallyhidden类以允许元素
*通过键盘导航到时可聚焦：
* https://www.drupal.org/node/897638
*/
.视觉隐藏。可聚焦：活动，
.视觉隐藏.聚焦：聚焦{
剪辑：自动；
高度：自动；
保证金：0；
溢出：可见；
位置：静态；
宽度：自动；
}
/*
*对屏幕阅读器进行可视和隐藏，但保持布局
*/
.无形的{
可见性：隐藏；
}
/*
*Clearfix：包含浮动
*
*适用于现代浏览器
* 1. 空间内容是避免Opera错误的一种方法，当
*“contenteditable”属性包含在文档中的任何其他位置。
*否则，它会在元素的顶部和底部显示空间
*接收“clearfix”类的。
* 2. 只有在使用时才需要使用“table”而不是“block”
*`:before`包含子元素的上边距。
*/
.clearfix:之前，
.clearfix:之后{
内容：；/*1*/
显示：表格；/*2*/
}
.clearfix:之后{
明确：两者皆有；
}
/* ==========================================================================
响应式设计的媒体查询示例。
这些示例覆盖了主（“移动优先”）样式。
根据内容需要进行修改。
========================================================================== */
@仅介质屏幕和（最小宽度：35em）{
/*符合条件的视口的样式调整*/
}
@媒体印刷，
（-webkit最小设备像素比：1.25），
（最小分辨率：1.25dppx），
（最小分辨率：120dpi）{
/*高分辨率设备的样式调整*/
}
/* ==========================================================================
打印样式。
内联以避免额外的HTTP请求：
http://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@媒体印刷品{
*,
*：之前，
*：之后，
*：第一个字母，
*：一线{
背景：透明！重要；
颜色：#000！重要；/*黑色打印速度更快：
http://www.sanbeiji.com/archives/953 */
盒影：无！重要；
文本阴影：无！重要；
}
A.
a:参观了{
文字装饰：下划线；
}
a[href]：之后{
内容：“（attr（href）”；
}
缩写[标题]：在{
内容：“（属性（标题）”；
}
/*
*不显示作为片段标识符的链接，
*或者使用`javascript:`伪协议
*/
a[href^=“#”]：之后，
a[href^=“javascript:”]：在{
内容：“；
}
之前，
大宗报价{
.search-field {
    width:100%;
    max-width:130px;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: rgba(255, 255, 255, 0.3);
    background-image: url('https://cdn.rawgit.com/encharm/Font-Awesome-SVG-PNG/b7f74631/black/png/24/search.png');
    background-position: 3px 3px;
    background-repeat: no-repeat;
    padding: 6px 20px 6px 40px;
    transition: max-width 0.4s ease-in-out;
}

.search-field.expand{
    max-width:500px;
}

.search {
  width:calc(100% - 40px);
}