Storybook: I want to see transition effect of element by change boolean toggle on story knobs.

Created on 23 May 2019  路  2Comments  路  Source: storybookjs/storybook

Is your feature request related to a problem? Please describe.
Describe the solution you'd like

I want to see transition effect of element by change boolean toggle on story knobs.
But I saw changing state of element without transition effect.
On Vue.js (in Nuxt.js).

MyComponent:

<template>
  <div :class="{ 'is-active': isActive }" />
</template>
<script>
export default {
  props: { isActive: Boolean }
}
</script>
<style>
div {
  transform: scale(0);
  transition: transform 1s;
}
div.is-active {
  transform: scale(1);
}
</style>

storybook.story:

storiesOf('MyComponent', module).add('story', () => {
  const isActive = boolean('isActive', false);
  return {
    components: { MyComponent },
    template: `<MyComponent :isActive="${isActive}" />`,
  };
});

Describe alternatives you've considered

I think DOM should update only attributes and variants when knobs changed on UI.
Now, it seems DOM re-rendered when knobs changed on UI (at some browser's dev-tool), so I couldn't see transition effect.

Are you able to assist bring the feature to reality?

No.
I'm sorry.

Versions

"nuxt": "^2.0.0",
"@storybook/vue": "^5.0.11",
"@storybook/addon-knobs": "^5.0.11",

Additional context
N/A.

knobs question / support

All 2 comments

Duplicated #6705.

Thank you for reporting this, I think it is a duplicated issue so I will just close here. Please move to #6705 for further discussions!

related to #6679.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

purplecones picture purplecones  路  3Comments

tlrobinson picture tlrobinson  路  3Comments

levithomason picture levithomason  路  3Comments

sakulstra picture sakulstra  路  3Comments

tomitrescak picture tomitrescak  路  3Comments