jquery - 实现 CSS 过渡

Question

我正在尝试制作一个简单的登录表单，当您单击“登录”时会出现该表单。用于 scale-transition、scale-out 和 scale-in 的 Materialise 类似乎不起作用。这是按钮的示例(他们网站上的示例仅使用和标签按钮，因此我尝试将其简化为这样，以防它不适用于表单字段:

<a id="sign-in" class="btn waves-effect waves-teal scale-transition">SIGN IN</a>
<a id="sign-up" class="btn waves-effect waves-teal scale-transition">SIGN UP</a>
<input class="login btn waves-effect waves-light scale-transition scale-out" type="submit" value="LOG IN"/>

我有一个 jQuery 函数，可以在单击注册按钮时添加和删除类，当我在 Chrome 中检查时可以看到它正在运行。

$('#sign-in').click(function() {
    $('#sign-in').addClass('scale-out');
    $('#sign-up').addClass('scale-out');
    $('.login').removeClass('scale-out').addClass('scale-in');
})

Materialize 的其他样式类似乎都可以正常工作，但我似乎找不到太多关于这个问题的信息。任何帮助都感激不尽。此外，“不工作”是指所有元素始终存在，无论应用了哪个类。

Answer 1

它对你有用吗？

<a href="#!" id="sign-in" class="btn waves-effect waves-teal scale-transition">SIGN IN</a>
<a href="#!" id="sign-up" class="btn waves-effect waves-teal scale-transition">SIGN UP</a>
<input class="login btn waves-effect waves-light scale-transition scale-out" type="submit" value="LOG IN"/>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$('#sign-in').click(function() {
    $('#sign-in').addClass('scale-out');
    $('#sign-up').addClass('scale-out');
    $('.login').removeClass('scale-out').addClass('scale-in');
})
</script>