Jquery 在display:none和display:inline块之间添加开关时，CSS3转换不起作用

我想在单击搜索按钮时从右向左滑动搜索框。搜索框应该是隐藏的。当我将marginright属性从-220px切换到0px时，转换工作正常

但是，当我添加display:none或display:inline块特性时，它不起作用。我还尝试了可见性属性。它会滑动，但我希望它从按钮的开头滑动，而不是在按钮后面

我不知道我错在哪里

请帮忙。

$document.onclick，搜索工具栏，函数{ var hasclass=$search.hasClasssearchshow； 如果！有课{ $search.addClasssearchshow.focus； }否则{ $search.removeclassearchshow； } }; @进口http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css; 输入条{ 边框颜色：红色； 列表样式：无； } 搜寻{ 背景：007F64； /*display:none；*/*执行此操作时，转换不起作用*/ 可见性：隐藏； 右：300px； 颜色：白色； 位置：绝对位置； 边界：无； 顶部：18px； 高度：27px； 宽度：177px； 填充：8px 4px； 右边距：-220px； 过渡：保证金权利； 过渡时间：.5s； } search.searchshow{ 边框颜色：41A940； 大纲：无； 右边距：100px； 能见度：可见； /*display:inline block；*//*如果这样做，转换将不起作用*/ } 搜索工具栏{ 背景：007F64； 颜色：白色； 位置：绝对位置； 右：260px； 顶部：18px； 边界：无； 字号：18px； 字体大小：粗体； }

---

任何显示属性都没有CSS转换，包括display:none

---

如果需要设置该转换的动画，则需要手动更改需要首先设置动画的任何属性，然后在javascript中设置延迟，以便在CSS转换完成后将其设置为“显示：无”。

正如前面的评论员所说，无法设置显示动画。改为操纵宽度怎么样？下面是一个工作示例：

搜寻{ /* ... */ 宽度：0； 填充：8px0； 过渡：全部；/*宽度和填充*/ 过渡时间：.5s； /* ... */ } search.searchshow{ /* ... */ 填充：8px 4px； 宽度：177px； /* ... */ } $document.onclick，搜索工具栏，函数{ var hasclass=$search.hasClasssearchshow； 如果！有课{ $search.addClasssearchshow.focus； }否则{ $search.removeclassearchshow； } }; @进口http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css; 输入条{ 边框颜色：红色； 列表样式：无； } 搜寻{ 背景：007F64； 右：300px； 颜色：白色； 位置：绝对位置； 边界：无； 顶部：18px； 高度：27px； 宽度：0； 填充：8px0； 过渡：全部；/*宽度和填充*/ 过渡时间：.5s； } search.searchshow{ 边框颜色：41A940； 大纲：无； 填充：8px 4px； 宽度：177px； } 搜索工具栏{ 背景：007F64； 颜色：白色； 位置：绝对位置； 右：260px； 顶部：18px； 边界：无； 字号：18px； 字体大小：粗体； } 不能设置显示动画，但可以设置“不透明度”属性的动画，以及

---

尽管可见性是可设置动画的，但这并不是从“隐藏”变为“可见”的最佳方式——该属性更多地是作为一种可访问性发明的。

不仅仅是显示：无，而是整个属性显示不可设置动画。出于某种原因，我不想通过javascript来实现。我相信我们可以利用溢出或可见性属性。只是不知道怎么做。谢谢..可能是重复的，伙计！谢谢。但是，有没有办法通过“溢出：隐藏”或“可见性”属性来实现这一点。我试了很多。很高兴知道。再次谢谢你，杰克…：