Button animation not working inside of card

I have a button inside of a card-footer:

<div class="card blue">
    <div class="card-content">
        <h1>{{ theme.name }}</h1>
    </div>
    <div class="card-footer">
        <p>Built by {{ theme.author }}</p>
        <a class="waves-effect waves-light btn"><i class="mdi-file-cloud"></i>View Theme</a>
    </div>
</div>

When I press the button, the wave effect is not invoked.

If I take the a and place it outside the card-footer, the wave effect is invoked as expected.

How can I maintain the wave effect inside of a card-footer? Thank you.

[bpetetot]

@ByteBlast Hi, you can trigger the wave effect by adding this into your controller :

Waves.displayEffect();

[AmareshKulkarni]

@razvanioan - The async behavior seems to be true with Aurelia as well. I had the same issue with animations and it started working once I explicitly called Waves.displayEffect();.

Thank you.