我无法通过VueJS在v-for中显示图像来实现淡入淡出.我想使用next/prev按钮逐个显示图像.

我在文件中读到:

Vue提供了一个转换包装组件,允许您在以下上下文中为任何元素或组件添加进入/离开转换:

  • 条件渲染(使用v-if)

  • 条件显示(使用v-show)

  • 动态组件

  • 组件根 node

所以我把我的代码安排成在我的v-for中有一个v-if.

下面是一段代码:

<transition name="fade">
   <img id='pvw' v-for='day in days' :src='day.preview' v-if='day.current' title='Preview' />
</transition>

还有一点css:

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-active {
  opacity: 0
}

Here是小提琴,看我想做什么.

请帮我实现这一点,不知道为什么它不起作用.

推荐答案

你必须使用TRANSITION GROUP,而不是过渡.

我建议使用https://github.com/asika32764/vue2-animate

例如,在您的情况下,您可以使用以下内容:

<transition-group name="fadeLeft" tag="div" >
    <img v-for="day in days" :src='day.preview'  v-bind:key="day" v-if='day.current' title='Preview'>  
</transition-group>

Vue.js相关问答推荐

VITE:无法为VUE单文件组件加载URL

使用内部方法创建计算(computed)属性是否合法?

如何在 vue2.7 中删除 slot-scope

使用 Vue.js 清除数组内容和react性问题

VueJS中的绑定函数含义

将props传递给设置时的VueJS 3组合API和TypeScript类型问题:类型上不存在属性 user用户

Vuelidate 判断true/false

作用域slots和 IE11 的问题

将数据传递给另一条路由上的组件

如何在 Vue 3 中使用 SSR

在组件之间共享数据

在Vue中单击路由链接上的激活方法

Leaflet+Vue+Vuetify / Leaflet map 隐藏 vuetify 弹出对话框

Vue Chart.js - 条形图上的简单点/线

在子元素 vueJS.2 之间切换active类

Vuex Mutation 正在运行,但组件在 vue 开发工具中手动提交之前不会更新

Vue.JS 2.0 修改不相关数据时速度慢

使用 Vuetify 的可滚动数据表

隐藏特定标题及其在 vuetify 数据表中的对应列

Mapbox 事件监听器