1

我是 VueJS 的新手。我花了最后两个小时尝试为滑块设置动画，最后我找到了解决方案，但我不明白为什么我需要将图像设置在绝对位置才能使用transform: translate属性获得幻灯片效果。有人可以解释我为什么吗？这是工作代码：

SCSS：

#slider {

        margin-top: 20px;
        width: 450px;
        height: 187.5px;
        position: relative;
        overflow: hidden;

        .layover {

            @extend %layover;
        }

        .wrapper-image-slider {

            width: 450px;
            height: 187.5px;
            position: relative;
            overflow: hidden;

            .slide-image {

                width: 100%;
                position: absolute; /* important */
                top: 0;
                left: 0;
                bottom: 0;
                right:0;
            }

            .thumb-text {

                position: absolute;
                top: 0;
                left: 0;
            }
            
        }

        .left-slide-enter-active, .left-slide-leave-active {

            transition: 1s;
        }

        .left-slide-enter {

            transform: translate(100%, 0);
        }

        .left-slide-leave-to {

            transform: translate(-100%, 0);
        }
    }

HTML：

                         <div id="slider">
                            <div class="layover"></div>
                            <transition-group name="left-slide" tag="div" class="wrapper-image-slider">
                                <div v-for="(post, index) in slider" :key="post.id" v-if="(activeImageSlider == index)">
                                    <img class="slide-image" :src="post.img">
                                    <div class="thumb-text">
                                        <div class="label">
                                            {{ slider[activeImageSlider].label }}
                                        </div>
                                        <h2>
                                            {{ slider[activeImageSlider].title }}
                                        </h2>
                                        <div class="descr">
                                            {{slider[activeImageSlider].descr }}
                                        </div>
                                    </div>
                                </div>
                            </transition-group>
                        </div>
4

1 回答 1

0

我认为您不需要为此使用列表转换。如果您创建一个只返回活动幻灯片的计算属性，那么您可以使用模式为“out-in”的正常转换。

https://jsfiddle.net/9oj1h8r3/1/

new Vue({
  el: "#app",
  data: {
    activeSlideIndex: 0,
    slides: [
      { img: "https://picsum.photos/200/300?random=1" },
      { img: "https://picsum.photos/200/300?random=2" },
      { img: "https://picsum.photos/200/300?random=3" },
      { img: "https://picsum.photos/200/300?random=4" }
    ]
  },
  computed: {
    activeSlide() {
      return this.slides[this.activeSlideIndex]
    }
  }
})
于 2021-06-10T18:59:01.147 回答