In the doc, it appears that we can transition UL elements like so:

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

But what I want to transition is a div. I've tried doing this but it doesn't appear to work

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

In the doc, it appears that we can transition UL elements like so:

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

But what I want to transition is a div. I've tried doing this but it doesn't appear to work

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

• javascript
• jquery
• html
• css
• materialize

• I assume you're using the Materialize CSS library? In the docs it only appears to support the list items and image fading. If it helps, you could manually achieve the effect you're after. Could you give a sample of how you want it to look/behave? – Graham Commented May 5, 2015 at 14:48
• Essentially what I'm trying to do is this: I have several tabs, and the tabs transition nicely, but the content switches instantaneously when you click on different tabs. So it feels off. Any transition to offset this would work. – Stupid.Fat.Cat Commented May 5, 2015 at 14:55
• Have you considered using Bootstrap? You can pass a fade parameter to them for this effect? Failing that, you could set the tab content to opacity: 0, then add an onclick event to the tab triggering opacity: 1 on the content? To animate the above you could use CSS3 transitions, e.g: transition: all 0.3s ease-in-out; I hope this helps! – Graham Commented May 5, 2015 at 15:45
• @Graham :) I've been avoiding using bootstrap over the fancy materialize css – Stupid.Fat.Cat Commented May 5, 2015 at 16:35
• Fair enough. Can I tempt you with Foundation Zurb instead, perhaps? :) – Graham Commented May 6, 2015 at 13:19

1 Answer 1

You only have to create the div inside li

Regards