Question

我正在Vue.js的组件中制作一个没有jQuery的滚动滑块，因此它仅是Javascript和CSS。我想使滑块动态化，以便在添加额外图像时滑块的div变得更大。因此，为了使其具有动态性，我使用javascript来获取div的宽度，并希望使用它来设置宽度。现在我的问题是我如何在与IE 10和11兼容的同时将此宽度绑定到@keyframes上。

在vuejs组件中：

<div id="slider1" class="s-carousel-section">
    <div class="s-image-carousel s-image-carousel-first" v-bind:style="{}">
        <img class="s-carousel-logo rounded mr-16" src="https://via.placeholder.com/300x320" alt="foto">
        <img class="s-carousel-logo rounded mr-16" src="https://via.placeholder.com/500x320" alt="foto">
        <img class="s-carousel-logo rounded mr-16" src="https://via.placeholder.com/400x300" alt="foto">
        <img class="s-carousel-logo rounded mr-16" src="https://via.placeholder.com/400x300" alt="foto">
        <img class="s-carousel-logo rounded mr-16" src="https://via.placeholder.com/350x320" alt="foto">
        <img class="s-carousel-logo rounded mr-16" src="https://via.placeholder.com/300x320" alt="foto">
        <img class="s-carousel-logo rounded mr-16" src="https://via.placeholder.com/500x320" alt="foto">
        <img class="s-carousel-logo rounded mr-16" src="https://via.placeholder.com/400x320" alt="foto">
    </div>
    <div class="s-image-carousel s-image-carousel-second">
        <img class="s-carousel-logo rounded mr-16" src="https://via.placeholder.com/350x320" alt="foto">
        <img class="s-carousel-logo rounded mr-16" src="https://via.placeholder.com/300x320" alt="foto">
        <img class="s-carousel-logo rounded mr-16" src="https://via.placeholder.com/500x320" alt="foto">
        <img class="s-carousel-logo rounded mr-16" src="https://via.placeholder.com/400x300" alt="foto">
        <img class="s-carousel-logo rounded mr-16" src="https://via.placeholder.com/400x300" alt="foto">
        <img class="s-carousel-logo rounded mr-16" src="https://via.placeholder.com/350x320" alt="foto">
        <img class="s-carousel-logo rounded mr-16" src="https://via.placeholder.com/300x320" alt="foto">
        <img class="s-carousel-logo rounded mr-16" src="https://via.placeholder.com/500x320" alt="foto">
    </div>
</div>

这是我用来获取滑块宽度的JavaScript（我使用imagesloaded以便在加载图像时获得图像的宽度）

imagesloaded(document.getElementById("slider1"), () => {
      var sliderWidth = document.getElementById("slider1").scrollWidth;
});

最后是使滑块移动的css

@keyframes first {
  0% { 
    transform: translateX(0px);
    opacity: 0;
    z-index: 0;
  }
  99.99% {
    transform: translateX(-1000px);
    opacity: 0;
    z-index: 0;
  }
  100% {
    opacity: 0;
    z-index: 0;
  }
}

@keyframes rest {
  0.01% {
    opacity: 0;
    z-index: 0;
  }
  0.011% {
    transform: translateX(0px);
    opacity: 1;
    z-index: 1;
  }
  100% {
    transform: translateX(-1000px);
    opacity: 1;
  }
}

将@keyframes与内联样式绑定一起使用

0 个答案: