javascript - CSS のマテリアライズ - UL 以外のトランジション アニメーション

Question

ドキュメントでは、次のように UL 要素を移行できるようです。

<a href="#!" class="btn" onclick="Materialize.showStaggeredList('#staggered-test')">Click Me</a>

<ul id="staggered-test">
      <li class="" style="transform: translateX(0px); opacity: 1;">
        <h4><a href="#">List Item</a></h4>
        <p>This is a description</p>
      </li>
      <li class="" style="transform: translateX(0px); opacity: 1;">
        <h4><a href="#">List Item</a></h4>
        <p>This is a description</p>
      </li>
</ul>

しかし、移行したいのはdivです。私はこれをやってみましたが、うまくいかないようです

<a href="#!" class="btn" onclick="Materialize.showStaggeredList('#staggered-test')">Click Me</a>

<div id="staggered-test">
    <p style="transform: translateX(0px); opacity: 0;">
        appear!
    </p>
</div>