Closed voronianski closed 7 years ago
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>
@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?
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
@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..
I think this can be closed 👍
Is it easy to add transition animation?