Example with transitions

[voronianski]

Is it easy to add transition animation?

[paulpflug]

depends on your definition of easy ;)

you can create a wrapper around the collapsible-item for setting a global animation wrapper from vue-materialize and than just load your wrapper instead of require("vue-collapsible/collapsible-item") (If the vue-materialize animation pleases you you can also it from vue-materialize)

or set it in your component:

# in your component
components:
  "collapsible": require("vue-collapsible/collapsible")
  "collapsible-item": require("vue-collapsible/collapsible-item")
methods:
  transitionIn: ({el,cb}) ->
    Velocity = require("velocity-animate")
    Velocity(el, "stop")
    Velocity(el, "slideDown",{
      duration: 350
      easing: "easeOutQuart"
      queue: false
      complete: cb
      })
  transitionOut: ({el,cb}) ->
    Velocity = require("velocity-animate")
    Velocity(el, "stop")
    Velocity(el, "slideUp",{
      duration: 350
      easing: "easeOutQuart"
      queue: false
      complete: cb
      })

<collapsible>
  <collapsible-item :transition-in="transitionIn" :transition-out="transitionOut">
    <h4 slot="header">header1</h4>
    <p>body 1</p>
  </collapsible-item>
  <collapsible-item :transition-in="transitionIn" :transition-out="transitionOut">
    <h4 slot="header">header21</h4>
    <p>body 2</p>
  </collapsible-item>
</collapsible>

[voronianski]

@paulpflug thanks your example is easy enough :) however there's is a problem with is-opened prop:

<template lang="jade">
  .container
    .grid
      .grid-cell-8
        collapsible(
          accordion=true
        )
          collapsible-item(
            is-opened=true
          )
            h4(slot="header") Header
            .content Content
</template>

This results in such markup:

<li class="collapsible-item opened">
  <div class="collapsible-header">
    <h4 slot="header">Header</h4>
  </div>
  <div class="collapsible-body" style="display: none;">
    <div class="express-payment-content">Content</div>
  </div>
</li>

is-opened is present but body is still display: none;. Why?

[paulpflug]

is-opened=true is the equivalent to js: var someVar = 'true' (vs. var someVar = true)

try

collapsible-item(
            is-opened
          )

(is-opened=is-opened or v-bind:is-opened=true should also work) for reference: http://stackoverflow.com/questions/4139786/what-does-it-mean-in-html-5-when-an-attribute-is-a-boolean-attribute

[voronianski]

@paulpflug your examples result in the same described above behavior.

collapsible-item(
            is-opened
          )

collapsible-item(
            :is-opened="isOpened" //- defined in `data`
          )

Looks like a bug..

[paulpflug]

I think this can be closed 👍