Materializecss Transitions

[emin-karadag]

Hello!

How can I use Transitions using Angular 2 and Materializecss? I want to run Transitions when the page is loaded.

For example: When the page loads, I want items in the menu to come up with the Transitions effect.

http://i.hizliresim.com/WgL5DY.png

Thank you very much in advance. :)

[rubyboy]

I haven't used it myself, but here's an example usage:

<a class="btn" (click)="animate()">Click Me</a>
        <ul id="staggered-test">
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
          <li>
            <h4><a href="#">List Item</a></h4>
            <p>This is a description</p>
          </li>
        </ul>

animate() {
    Materialize.showStaggeredList('#staggered-test');
  }

[emin-karadag]

Thank you very much. I will try this. :)

[rubyboy]

@mekkem02 have you had a chance to try it? I'd like to know if we can close this issue. Thanks.

[Koushik-Sarkar]

Hi @rubyboy

I tried your solution but it won't work. Angular is not able to recognize "Materialize.showStaggeredList". Would you share from which module or component we can get the reference to "Materialize"?

Thanks