Question

当一个图像每次更改为另一图像时，它都会左右移动一点，然后在动画之后返回，直到下一张图像更改为止。这是简单的幻灯片演示。这是代码：

<div>
    <transition-group name='fade' tag='div'>
      <div v-for="n in [currentN]" :key='n'>
        <img :src="Image" />
      </div>
    </transition-group>
</div>

CSS

.fade-enter-active,
.fade-leave-active {
  transition: all 0.8s ease;
  overflow: hidden;
  visibility: visible;
  opacity: 1;
  position: absolute;
  width:100%
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  visibility: hidden;
  width:100%
}

img {
  height:600px;
  width:100%
}

出了什么问题？如何解决该图像更改动画问题，并在不更改其位置的情况下始终保持图像全屏和全屏600px？

几天前我在jsfiddle中找到了它，并试图对其进行更改。

Answer 1

推荐的解决方案

为img的宽度提供静态数将解决此问题。从100%更改为px中的首选宽度，如下所示：

img{
    height:200px;
    width:300px;
}

替代解决方案：

body{
  margin:0px;
}

这可以防止图像从网格中流出，并使您能够像最初那样在图像标签上使用100%。示例：https://jsfiddle.net/L5y2hqua/

代码段

new Vue({
    el: 'image-slider',
    data: {
        images: ['http://i.imgur.com/vYdoAKu.jpg', 'http://i.imgur.com/PUD9HQL.jpg', 'http://i.imgur.com/Lfv18Sb.jpg', 'http://i.imgur.com/tmVJtna.jpg', 'http://i.imgur.com/ZfFAkWZ.jpg'],
        currentNumber: 0,
        timer: null
    },

    mounted: function () {
        this.startRotation();
    },

    methods: {
        startRotation: function() {
            this.timer = setInterval(this.next, 3000);
        },


        next: function() {
            this.currentNumber += 1
        },
        prev: function() {
            this.currentNumber -= 1
        }
    },
    
    computed: {
    	currentImage: function() {
      	return this.images[Math.abs(this.currentNumber) % this.images.length];
      }
    }
});

.fade-enter-active,
.fade-leave-active {
  transition: all 0.8s ease;
  overflow: hidden;
  visibility: visible;
  opacity: 1;
  position: absolute;
  width:100%;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
  visibility: hidden;
  width:100%;
}

img {
    height:200px;
    width:300px;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.6/vue.js"></script>
<body>

<div class="slider-wrapper">
<image-slider>
    
    <transition-group name='fade' tag='div'>
      <div
       v-for="number in [currentNumber]"
       :key='number'
       >
         <img
             :src="currentImage"
             />
    </div>
  </transition-group>
</image-slider>
</div>
</body>

如何修复此图像幻灯片的CSS问题？

1 个答案: