Slides inside a slide with fade transition

[electroheadfx]

Is your feature request related to a problem? Please describe. I created a component for have slides inside a slide, like a sub slides elements

<script setup lang="ts">

const props = defineProps({
  click: {
    default: "1",
  }
})
</script>

<template>
  <div v-click="click" >
    <div v-if="$slidev.nav.clicks === parseInt(click)"
      v-motion
      :initial="{ opacity: 0 }"
      :visible="{ opacity: 1, transition: { delay: 50, duration: 600 } }"
    >
      <slot />
    </div>
  </div>
</template>

Then I call my component :

<Element>
  <h1>Wooow !</h1>
  <p>Bonjour la france</p>
</Element>

<Element click="2">
  <h2>Yaoooohhh !</h2>
  <p>miam miam</p>
</Element>

So the Element 1 (click 1) appear only and disapear in the second click then the second element come etc ...

Describe the solution you'd like I'd like to have built-in function to control fade, element to appear only or not. ~~Actually with my implementation I have no Markdown, slot can't accept it, I dont know how to do it.~~

[electroheadfx]

I did this code and work very well, the element component allow a prop : hide, which make slow with hidden the element after the next click.

Element.vue:

<script setup lang="ts">

const props = defineProps({
  click: {
    type: String,
    default: "1",
  },
  hide: {
    type: Boolean,
    default: false,
  }
});

</script>

<template>
  <div v-if="hide" v-click="click" >
    <div
      v-if="$slidev.nav.clicks === parseInt(click)"
      v-motion
      :initial="{ opacity: 0 }"
      :visible="{ opacity: 1, transition: { delay: 50, duration: 600 } }"
    >
      <slot />
    </div>
  </div>
  <div v-else v-click="click" >
    <div
      v-motion
      :initial="{ opacity: 0 }"
      :visible="{ opacity: 1, transition: { delay: 50, duration: 600 } }"
    >
      <slot />
    </div>
  </div>
</template>

Element component in slidev:

<!-- the element show with fade and stay in place next click -->
<element>

  # toto
  Bonjour la france

</element>

<!-- the element show with fade and hide after next click -->
<element click="2" hide>
  <h2>Yaoooohhh !</h2>
  <p>miam miam</p>
</element>

[blikblum]

Also needed this

A workaround i did was to nest v-click and v-click-hide

---
clicks: 3
---

# Title
Subtitle

<div v-click="1">

<div v-click-hide="2">

## Content 1

</div>

</div>

<div v-click="2">

<div v-click-hide="3">

## Content 2

</div>

</div>

<div v-click="3">

## Content 3

</div>

Some drawbacks:

• needed to specify clicks count at config
• used separated elements
• need to add custom style to display none instead of opacity other wise the new content would be show below:

.slidev-vclick-hidden {
  transform: scale(0);
  display: none;
}

No played with animations, not sure if is possible

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[blikblum]

Still relevant

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[blikblum]

Hello

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.