Question

我正在尝试点击它时制作一个简单的按钮，出现一个框内滑动的框（一个简单的注册表单），所有在同一个html我一直试图这样做但我找不到方式。

我一直在尝试使用-webkit-transition，但我不知道自己是不是很好。

<style type="text/css">
  .box {
     -webkit-transition:
   }
</style>


<button id="reg" onClick="?"></button>

希望你们都能帮助我！

谢谢！

Answer 1

纯CSS实现怎么样？

Demo Fiddle

HTML

<div>
    <input id='box' type='checkbox' />
    <label for='box'>Click Me!</label>
    <form></form>
</div>

CSS

div {
    position:relative;
}
label {
    position:absolute;
    left:0;
    background:white;
}
input[type=checkbox] {
    opacity:0;
}
form {
    border:1px solid transparent;
    height:300px;
    max-width:0;
    transition:max-width 200ms ease-in;
}
input[type=checkbox]:checked ~ form {
    max-width:300px;
    border:1px solid red;
}

Answer 2

我不允许添加评论，因为我的声誉太低了__-。无论如何，Ralsho，你想转换到不同的页面/ HTML，或者你想将不同页面的HTML加载到你的页面中吗？

如果您想要第一件事，请点击此链接：http://www.fasw.ws/faswwp/non-jquery-page-transitions-lightweight/

如果你想留在同一页面上，创建一个div并将其放在用户视图之外，让我们说margin-left：-500px。然后做一些事情：

$('label').click(function() {
    $("#formHolder").load("myForm.html");
    $('#formHolder').animate({
    'marginLeft': '10px'
    }, 350);
});

这将从名为#formHolder的div中的myForm.html加载您的表单，然后它将滑动div #formHolder（现在包含您的HTML表单）并显示该表单。

但是，您可以做的最好的事情就是将表单放在要显示的页面上。因此，只需创建一个名为#form的div，将表单放入其中并使其滑动。执行此操作时，可以使用load（）函数删除该行。

祝你好运！

转换，以寄存器形式转换

2 个答案:

Demo Fiddle