我想实现此页面上发生的事情:http://yogatime.tv/
当您点击“请求邀请”时,该按钮会消失,并且会在其位置显示一个简洁的选择加入形式。我检查了css和源代码,无法对此进行排序。
任何人都知道如何做到这一点?
谢谢, 马修
答案 0 :(得分:0)
当您单击按钮时,他们将按钮样式设置为" display:none"同时他们将表单样式设置为" display:inline-block"。
为了使其看起来像平滑过渡,它们也会改变元素的不透明度。
答案 1 :(得分:0)
可能发生的事情是,他们淡出第一个盒子,将另一个元素放入其中,然后将其淡入。这是一个基本的例子:
document.getElementById('target_1').onclick = function() {
document.getElementById('target_1').classList.add('active');
setTimeout(function() {
document.getElementById('target_1').style.display = 'none';
document.getElementById('target_2').classList.add('active');
}, 600);/*time*/
};

#target_1 {
border: 1px solid #AAA;
border-radius: 10px;
height: 20px;
width: 300px;
text-align: center;
line-height: 20px;
font-size: 14px;
opacity: 1;
transition: all 600ms ease;/*time*/
}
#target_1.active {
opacity: 0;
}
#target_2 {
border: 1px solid #AAA;
border-radius: 20px;
height: 20px;
width: 300px;
text-align: center;
line-height: 20px;
font-size: 14px;
opacity: 0;
transition: opacity 600ms ease;/*time*/
}
#target_2.active {
opacity: 1;
}

<div id="target_1">Div1</div>
<div id="target_2">Div2</div>
&#13;
答案 2 :(得分:0)
试试这个
https://jsfiddle.net/1xwvas49/3/
<强> HTML 强>
<body>
<button id="target">Request Invite</button>
<form id="result">
<input id="btn" type="text">
<input id="btn" type="submit">
</form>
</body>
<强> CSS 强>
body{
background-image: url('http://www.aisquared.com/blog/wp-content/uploads/2010/11/yoga.jpg')
}
#target{
border-radius:10px;
background-color:white;
}
<强> JS / jquery的强>
$( "#target" ).click(function() {
$(this).css('display', 'none');
$('form').fadeIn(1000)
});