Search code examples
jqueryhtmlcssmaterialize

Materialize CSS Transitions

I'm trying to make a simple login form that appears when you click "sign-in." The Materialize classes for scale-transition, scale-out, and scale-in do not seem to be working. Here is an example of the buttons (the example on their site only uses and a tag button, so I've tried simplifying it down just to that, in case it isn't meant to work on form fields:

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

I have a jQuery function that adds and removes classes when the sign up button is clicked, and I can see that it is working when I inspect in Chrome.

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

The other styling classes for Materialize all appear to be working, and I can't seem to find much on this issue. Any help will be much appreciated. Also, by "not working" I mean that all of the elements are there, all of the time, no matter which classes are applied.

Solution

  • Does it work for you?

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