来自另一个元素的单击事件的 CSS 过渡答案

【问题标题】：CSS transition on click event from another element来自另一个元素的单击事件的 CSS 过渡
【发布时间】：2015-01-24 12:49:05
【问题描述】：

很抱歉标题没有真正的意义。我所拥有的是一个“问题或评论”跨度，我想要它做的是当您单击它时，下面会出现一个表单（在转换中）。我已经尝试在这个网站上查看类似的问题，但没有一个能够为我正在尝试做的事情工作。目前我有javascript在单击跨度时为表单提供display:block属性。如果可能的话，我想使用 CSS。如果不可能，那么我将接受 javasacript。有什么帮助吗？
这是我的代码：

HTML：

<span id="comment">Questions or Comments</span>
<form action="" method="post">
<textarea></textarea>
<input type="submit" id="submit" />
</form>

和 CSS：

#comment {
text-decoration:underline;
}

form {
display:none;
}

【问题讨论】：

标签： html css transition

【解决方案1】：

Display 不是动画属性。尝试更改表单高度或不透明度。例如：

form {
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
}
form.hidden {
    opacity: 0;
}

然后只需使用 JavaScript 切换类。

【讨论】：

【解决方案2】：

隐藏和显示div的属性不是display，而是

visibility:[hidden/show]

我不相信没有 javascript 调用是可能的 - 这是一个使用 jQuery 的example。

【讨论】：

ryans 方法有效 - 但请注意可能有一些 browser limitations
谢谢...但我要求过渡。如果你能把它添加到你的 js fiddle 那就太好了
“隐藏和显示 div 的属性不是显示，而是可见性”——这不是真的；两者都可以用来“隐藏”一个元素，但对布局有不同的影响。