物化 CSS 过渡答案

【问题标题】：Materialize CSS Transitions物化 CSS 过渡
【发布时间】：2017-07-16 15:03:05
【问题描述】：

我正在尝试制作一个简单的登录表单，当您单击“登录”时会显示该表单。用于缩放转换、横向扩展和缩减的 Materialize 类似乎不起作用。这是按钮的示例（他们网站上的示例仅使用和标记按钮，因此我尝试将其简化为仅此一点，以防它不适用于表单字段：

<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 的其他样式类似乎都在工作，我似乎在这个问题上找不到太多。任何帮助都感激不尽。另外，“不工作”是指所有元素都存在，一直存在，无论应用了哪些类。

【问题讨论】：

标签： jquery html css materialize

【解决方案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>

【讨论】：

好吧，我可能也确实需要这样做（感谢您的发现！），但不幸的是，这对这个问题没有任何影响。我什至尝试检查他们的页面，看看是否有某些内容已更改但未记录在案，但那里也没有运气。
我已经更新了一个答案。似乎完全适合我，经过测试。如果它不适合你，我会再次测试。
天哪，非常感谢！我更新了我们的脚本标签，效果很好！这些是我团队中的其他人设置的，我什至从未看过它们。
下一次，您可以按 Ctrl-Shift-J 打开开发者工具。见这张照片：i.imgur.com/wUbaiV3.png。这是错误消息，如果找不到 jQuery 库，将显示该消息。显然，那里还会显示另一个错误消息。在我的示例中，错误发生在文件的第 7 行。如果这个问题解决了，别忘了接受答案 ;-)

【解决方案2】：

可以用更简单的方式完成。

表单容器 - 可见性：隐藏

onClick - 可见性：可见

要应用过渡效果，只需在容器中添加一个类。

【讨论】：

【解决方案3】：

这应该可行！

<a id="toggle" href="#!" class="btn right">toggle</a>
<a id="scale" href="#!" class="btn-floating btn-large scale-transition scale-in">
    <i class="material-icons">add</i>
</a>

let c = 0;
$('#toggle').click( f => c == 0
 ? `${$('#scale').removeClass('scale-in').addClass('scale-out')} ${c = c+=1}` 
 : `${$('#scale').removeClass('scale-out').addClass('scale-in')} ${c = c-=1}`
);

【讨论】：