Use index with tailwind's dynamic class in a for-loop to manage animation-delay?

[rowild]

In a Nuxt project that uses tailwindcss I would like to animate a drop-down list. To do so I would like to use the v-for's index value to "configure" the transition-delay value of each item, like this:

<div v-for="(item, index) in items" :key="index">
    <div class="transition" :class="{ 'visible bg-opacity-100 delay-[100ms * ${index}]': showItems }">...</div>
</div>

This does not work though. Would anybody happen to know what the proper way of writing such CSS is?

[LinusBorg]

<div v-for="(item, index) in items" :key="index">
    <div class="transition" :class="{ [`visible bg-opacity-100 delay-[${100 * index}ms]`]: showItems }">...</div>
</div>

[rowild]

Thank you for your fast answer, @LinusBorg !!! – I didn't get this to work, though. I prepared an example at Stackblitz:
https://stackblitz.com/edit/nuxt-starter-d1zs6g?file=components%2FPointCloud.vue

The code in question is aroun sline 500ff:

    <div
        v-for="(model, index) in pointCloudModels.data"
        :key="index"
        :class="{
==>          '[`opacity-100 duration-500 delay-[${100 * index}ms]`]':
            showListOfModels,
          'opacity-0 duration-100': !showListOfModels,
        }"
        class="flex flex-row items-center gap-4 w-60 p-3 transition cursor-pointer border rounded-md bg-opacity-20 border-opacity-30 hover:bg-opacity-50 hover:border-opacity-60"
        @click="loadPlyModel(model.src, model.name, model.options)"
      >

Do you happen to see my error?

[LinusBorg]

You added single quotes around the dynamic property that don't belong there

[rowild]

Removed. But still no change...

[rowild]

Actually, the code that is generated is correct. My error must be somewhere else.