实现CSS转换

我试图制作一个简单的登录表单，当您单击“登录”时出现。 Scale-transition，Scale-out和Scale-in的Materialise类似乎不起作用。这里是一个按钮的例子（他们网站上的例子只使用了一个标签按钮，所以我试图简化它，以防它不能用于表单域）：实现CSS转换

<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'); 
})

其他造型类Materialise的所有出现在这个问题上，我似乎找不到任何帮助，任何帮助都会得到很大的赞赏，另外，通过“不工作”，我的意思是说，所有的元素都在那里，所有的时间，没有重要的是应用哪些类。

来源

2017-02-25 melanie

它适合你吗？

<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>

来源

2017-02-25 21:04:23

嗯，我可能确实也需要这样做（感谢抓住！），但不幸的是，这对这个问题没有任何影响。我甚至试着检查他们的页面，看看有没有改变但没有记录，但没有运气。 – melanie

我已更新答案。似乎完全为我工作，测试。如果它不适合你，我会再次测试。 –

omg，非常感谢！我更新了我们的脚本标签，它完美地工作！这些是由我的团队中的其他人设立的，我从来没有看过他们。 – melanie

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

Form容器 - visibility：hidden的

的onClick - 能见度：可见

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

来源

2017-02-25 21:37:25

回答

相关问题