图像滑块-使用{#each}通过单击更改可见图像的按钮呈现img时，转换和动画不起作用
图像滑块-使用{#each}通过单击更改可见图像的按钮呈现img时，转换和动画不起作用
提问于 2022-07-03 18:24:12
这是我第一次问关于堆栈溢出的问题，根据我的感觉，我遗漏了一些很小的东西，或者没有正确地理解逻辑。我通过{# and }块和切片显示图像，通过添加和减去变量: selected，prevSelected。根据我在svelte教程中所理解的，它应该工作(https://svelte.dev/tutorial/local-transitions)，由于某些原因，图像只是在没有转换的瞬间出现。我试着重新构建函数中的逻辑，超时和重新启动，但似乎没有工作。
请向我解释我错过了什么。很抱歉知识不多，昨天我第一个学到的是svelte。我正在使用最新的sveltekit版本。
编辑:我也使用最新的顺风css。
<script>
import { slide,fade } from 'svelte/transition';
let images = [
{
Index: 0,
src: 'src/images/img2.jpeg',
alt: 'znaki ewakuacyjne',
class: 'show'
},
{
Index: 1,
src: 'src/images/img3.jpeg',
alt: 'buty',
class: ''
},
{
Index: 2,
src: 'src/images/img4.jpeg',
alt: 'znaki informacyjne',
class: ''
}
];
let selected = 1;
let prevSelected = 0;
let shown=true;
function handleClick() {
if (selected == 3) {
return;
}
prevSelected = selected;
selected += 1;
}
function handleBack() {
if (selected == 1) {
return;
}
prevSelected -= 1;
selected -= 1;
}
</script>
<h3 class="text-center font-semibold text-xl m-3">Galeria</h3>
<div class="image-gallery flex flex-col justify-center items-center">
{#if shown}
{#each images.slice(prevSelected, selected) as img}
<img
transition:fade
src={img.src}
alt={img.alt}
class="h-80 w-50 rounded-lg"
/>
{/each}
{/if}
<div class="flex flex-row gap-12">
<button
on:click={handleBack}
type="button"
class="text-white bg-red-700 hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 font-medium rounded-full text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900 m-3"
>⬅️</button
>
<button
on:click={handleClick}
type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 font-medium rounded-full text-sm px-5 py-2.5 text-center mr-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800 m-3"
>➡️</button
>
</div>
</div>
<style lang="scss">
</style>回答 1
Stack Overflow用户
回答已采纳
发布于 2022-07-03 19:11:08
您需要键入{#each} (见文档)。
{#each images.slice(prevSelected, selected) as img (img)}否则，相同的组件将被重用，只会更改其属性。
请注意，您可能必须调整布局，以使两个图像采取相同的地方，否则的图像褪色将推开，其中一个褪色。
顺便说一下，如果您只显示一个图像，则根本不需要each，只需要{#key}和索引。
{#key selected}
<img
transition:fade
src={images[selected - 1].src}
alt={images[selected - 1].alt}
class="h-80 w-50 rounded-lg"
/>
{/key}可以通过始终解析为反应语句的images[selected - 1]进一步简化。prevSelected是多余的，我会将selected的逻辑改为基于0的逻辑，而不是基于1的逻辑。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/72848939
复制相关文章
相似问题
腾讯云开发者
