CSS 来自另一个元素的点击事件的转换

Question

抱歉，标题没有真正意义。我有一个 "Questions or Comments" 跨度，我想要它做的是当您单击它时，下面会出现一个表单（在过渡中）。我已经尝试查看此站点上的类似问题，但 none 已经能够完成我正在尝试做的事情。目前，我 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;
}

Answer 1

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

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

然后只需使用 JavaScript 切换 class。

Answer 2

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

visibility:[hidden/show]

我认为没有 javascript 调用是不可能的 - 这里是 example 利用 jQuery。

CSS 来自另一个元素的点击事件的转换

CSS transition on click event from another element

html

css

transition