javascript - Materialize CSS - Transition animation for things other than UL - Stack Overflow

admin管理员组

文章数量:1426015

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

Share Improve this question Follow asked May 5, 2015 at 14:34 Stupid.Fat.CatStupid.Fat.Cat 11.4k2828 gold badges9494 silver badges163163 bronze badges 5

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

You only have to create the div inside li

Regards

本文标签： javascriptMaterialize CSSTransition animation for things other than ULStack Overflow