滑块内容与滑块一起移动

时间：2017-07-01 07:08:43

标签： javascript html css slider

我遇到滑块问题：幻灯片content应保持固定在右下角并在那里预制动画，但它首先沿滑块移动，然后动画回到这个职位。我想说的是，当幻灯片进入时它从右向左滑动，当幻灯片消失时，它会滑回到不可见的位置。

这是我的代码：

＆＃13;
＆＃13; 
var theSlider = {
  track: document.querySelector('.m-tract-slider-wrapp'),
  // has to match `transition-duration` in CSS:
  duration: 450,
  reset: function() {
    var slides = document.querySelectorAll('.m-tract-slider-wrapp > div');
    for (var i = 0; i < slides.length; i++) {
      slides[i].className = '';
      slides[i].classList.add(i > 1 ? 'after' : (i ? 'current' : 'before'))
    }
  },

  init: function() {
    theSlider.reset();
    theSlider.track.classList.remove('not-loaded')
  },

  next: function() {
    theSlider.track.classList.add('go-right');
    setTimeout(function() {
      var firstSlide = document.querySelector('.m-tract-slider-wrapp > div:first-child');
      theSlider.track.appendChild(firstSlide);
      theSlider.reset();
      theSlider.track.classList.remove('go-right')
    }, theSlider.duration)
  },

  prev: function() {
    theSlider.track.classList.add('go-left');
    setTimeout(function() {
      var lastSlide = document.querySelector('.m-tract-slider-wrapp > div:last-child');
      theSlider.track.insertBefore(lastSlide, theSlider.track.firstChild);
      theSlider.reset();
      theSlider.track.classList.remove('go-left')
    }, theSlider.duration)
  },

  prevButton: document.querySelector('.slide-left'),
  nextButton: document.querySelector('.slide-right')
};

window.addEventListener("load", theSlider.init);
theSlider.prevButton.addEventListener('click', theSlider.prev);
theSlider.nextButton.addEventListener('click', theSlider.next);
＆＃13; 
.m-tract-slider {
  width: 100%;
  height: 75vh;
  margin: 5em auto;
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5
}

.m-tract-slider-wrapp {
  height: 100%;
  -webkit-transition: all 350ms cubic-bezier(.08, .13, 0, .81);
  -moz-transition: all 350ms cubic-bezier(.08, .13, 0, .81);
  -o-transition: all 350ms cubic-bezier(.08, .13, 0, .81);
  transition: all 350ms cubic-bezier(.08, .13, 0, .81);
  opacity: 1
}

.m-tract-slider-wrapp.not-loaded {
  opacity: 0
}

.m-tract-slider-wrapp>div {
  height: 100%;
  position: absolute;
  background: transparent no-repeat 50% 50%/cover;
  width: 100%
}

.m-tract-slider-wrapp>div.before {
  margin-left: -100%
}

.m-tract-slider-wrapp>div.current+div {
  margin-left: 100%
}

.m-tract-slider-wrapp>div.current .m-tract-slide-content {
  transform: translateX(0);
  -ms-transform: translateX(0);
  -webkit-transform: translateX(0);
  -webkit-transition: transform 350ms ease-in;
  -moz-transition: transform 350ms ease-in;
  -o-transition: transform 350ms ease-in;
  transition: transform 350ms ease-in;
  transition-delay: .6s;
  margin-left: 0
}

.m-tract-slider-wrapp>div.after~div {
  opacity: 0
}

.m-tract-slide-content {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40%;
  background: #fff;
  padding: 3em;
  margin: 0;
  height: 50vh;
  transform: translateX(100%);
  -ms-transform: translateX(100%);
  -webkit-transform: translateX(100%);
  -webkit-transition: transform 350ms ease-in;
  -moz-transition: transform 350ms ease-in;
  -o-transition: transform 350ms ease-in;
  transition: transform 350ms ease-in;
  transition-delay: .6s
}

.m-tract-slide_title {
  font-size: 32px;
  font-weight: 700;
  color: #212121
}

.m-tract-slide_text {
  font-size: 18px;
  display: block;
  margin-top: 2em;
  color: #ccc;
  font-weight: 300
}

.m-tract-slider-control {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
  padding: 1em
}

.m-tract-slider-btn {
  display: inline-block;
  cursor: pointer;
  margin-left: 1em
}

.m-tract-slider-btn:first-child {
  margin-left: 0
}

.go-right div {
  transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -webkit-transform: translateX(-100%)
}

.go-left div {
  transform: translateX(100%);
  -ms-transform: translateX(100%);
  -webkit-transform: translateX(100%)
}

.go-left div,
.go-right div {
  -webkit-transition: transform 450ms cubic-bezier(.4, 0, .2, 1);
  -moz-transition: transform 450ms cubic-bezier(.4, 0, .2, 1);
  -o-transition: transform 450ms cubic-bezier(.4, 0, .2, 1);
  transition: transform 450ms cubic-bezier(.4, 0, .2, 1)
}
＆＃13; 
<div class="m-tract-slider">
  <div class="m-tract-slider-wrapp">

    <div style="background-image:url('https://static.pexels.com/photos/126282/pexels-photo-126282.jpeg')" class="before">
      <div class="m-tract-slide-content first-slide">
        <span class="m-tract-slide_title">Gde ćeš provesti večnost?</span>
        <span class="m-tract-slide_text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatum ea assumenda, nam quia, distinctio omnis. Aspernatur,
          molestias nostrum dolores? Voluptas sequi labore cum ipsum
          necessitatibus possimus, soluta veritatis aut dicta.
        </span>
      </div>
    </div>

    <div style="background-image:url('https://static.pexels.com/photos/29017/pexels-photo-29017.jpg')" class="current">
      <div class="m-tract-slide-content first-slide">
        <span class="m-tract-slide_title">Title 2</span>
        <span class="m-tract-slide_text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatum ea assumenda, nam quia, distinctio omnis. Aspernatur,
          molestias nostrum dolores? Voluptas sequi labore cum ipsum
          necessitatibus possimus, soluta veritatis aut dicta.
         </span>
      </div>
    </div>

    <div style="background-image:url('https://static.pexels.com/photos/70760/dandelion-dandelion-seeds-taraxacum-fluffy-70760.jpeg')" class="after">
      <div class="m-tract-slide-content first-slide">
        <span class="m-tract-slide_title">Title 3</span>
        <span class="m-tract-slide_text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatum ea assumenda, nam quia, distinctio omnis. Aspernatur,
          molestias nostrum dolores? Voluptas sequi labore cum ipsum
          necessitatibus possimus, soluta veritatis aut dicta.
        </span>
      </div>
    </div>

  </div>

  <div class="m-tract-slider-control">
    <div class="m-tract-slider-btn slide-left">Prev</div>
    <div class="m-tract-slider-btn slide-right">Next</div>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

当您处理影响动画的属性时，您需要非常小心选择器。

.go-right div和.go-left div选择器正在影响.go-right和.go-left的每个兄弟，而您可能只希望直接兄弟姐妹（幻灯片）受到影响，所以我将其替换为.go-right>div和.go-left>div：

var theSlider = {
  track: document.querySelector('.m-tract-slider-wrapp'),
  // has to match `transition-duration` in CSS:
  duration: 450,
  reset: function() {
    var slides = document.querySelectorAll('.m-tract-slider-wrapp > div');
    for (var i = 0; i < slides.length; i++) {
      slides[i].className = '';
      slides[i].classList.add(i > 1 ? 'after' : (i ? 'current' : 'before'))
    }
  },

  init: function() {
    theSlider.reset();
    theSlider.track.classList.remove('not-loaded')
  },

  next: function() {
    theSlider.track.classList.add('go-right');
    setTimeout(function() {
      var firstSlide = document.querySelector('.m-tract-slider-wrapp > div:first-child');
      theSlider.track.appendChild(firstSlide);
      theSlider.reset();
      theSlider.track.classList.remove('go-right')
    }, theSlider.duration)
  },

  prev: function() {
    theSlider.track.classList.add('go-left');
    setTimeout(function() {
      var lastSlide = document.querySelector('.m-tract-slider-wrapp > div:last-child');
      theSlider.track.insertBefore(lastSlide, theSlider.track.firstChild);
      theSlider.reset();
      theSlider.track.classList.remove('go-left')
    }, theSlider.duration)
  },

  prevButton: document.querySelector('.slide-left'),
  nextButton: document.querySelector('.slide-right')
};

window.addEventListener("load", theSlider.init);
theSlider.prevButton.addEventListener('click', theSlider.prev);
theSlider.nextButton.addEventListener('click', theSlider.next);
.m-tract-slider {
  width: 100%;
  height: 75vh;
  margin: 5em auto;
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5
}

.m-tract-slider-wrapp {
  height: 100%;
  transition: all 350ms cubic-bezier(.08, .13, 0, .81);
  opacity: 1
}

.m-tract-slider-wrapp.not-loaded {
  opacity: 0
}

.m-tract-slider-wrapp>div {
  height: 100%;
  position: absolute;
  background: transparent no-repeat 50% 50%/cover;
  width: 100%
}

.m-tract-slider-wrapp>div.before {
  margin-left: -100%
}

.m-tract-slider-wrapp>div.current+div {
  margin-left: 100%
}

.m-tract-slider-wrapp>div.current .m-tract-slide-content {
  transform: translateX(0);
  margin-left: 0
}

.m-tract-slider-wrapp>div.after~div {
  opacity: 0
}

.m-tract-slide-content {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40%;
  background: #fff;
  padding: 3em;
  margin: 0;
  height: 50vh;
  transform: translateX(100%);
  transition: transform 350ms ease-in;
  transition-delay: 0s; /* was .6s */
}

.m-tract-slide_title {
  font-size: 32px;
  font-weight: 700;
  color: #212121
}

.m-tract-slide_text {
  font-size: 18px;
  display: block;
  margin-top: 2em;
  color: #999;
  font-weight: 300
}

.m-tract-slider-control {
  position: absolute;
  bottom: 0;
  left: 0;
  background: #fff;
  padding: 1em
}

.m-tract-slider-btn {
  display: inline-block;
  cursor: pointer;
  margin-left: 1em
}

.m-tract-slider-btn:first-child {
  margin-left: 0
}

.go-right > div {
  transform: translateX(-100%);
}

.go-left > div {
  transform: translateX(100%);
}

.go-left > div,
.go-right > div {
  transition: transform 450ms cubic-bezier(.4, 0, .2, 1)
}
<div class="m-tract-slider">
  <div class="m-tract-slider-wrapp">

    <div style="background-image:url('https://static.pexels.com/photos/126282/pexels-photo-126282.jpeg')" class="before">
      <div class="m-tract-slide-content first-slide">
        <span class="m-tract-slide_title">Gde ćeš provesti večnost?</span>
        <span class="m-tract-slide_text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatum ea assumenda, nam quia, distinctio omnis. Aspernatur,
          molestias nostrum dolores? Voluptas sequi labore cum ipsum
          necessitatibus possimus, soluta veritatis aut dicta.
        </span>
      </div>
    </div>

    <div style="background-image:url('https://static.pexels.com/photos/29017/pexels-photo-29017.jpg')" class="current">
      <div class="m-tract-slide-content first-slide">
        <span class="m-tract-slide_title">Title 2</span>
        <span class="m-tract-slide_text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatum ea assumenda, nam quia, distinctio omnis. Aspernatur,
          molestias nostrum dolores? Voluptas sequi labore cum ipsum
          necessitatibus possimus, soluta veritatis aut dicta.
         </span>
      </div>
    </div>

    <div style="background-image:url('https://static.pexels.com/photos/70760/dandelion-dandelion-seeds-taraxacum-fluffy-70760.jpeg')" class="after">
      <div class="m-tract-slide-content first-slide">
        <span class="m-tract-slide_title">Title 3</span>
        <span class="m-tract-slide_text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatum ea assumenda, nam quia, distinctio omnis. Aspernatur,
          molestias nostrum dolores? Voluptas sequi labore cum ipsum
          necessitatibus possimus, soluta veritatis aut dicta.
        </span>
      </div>
    </div>

  </div>

  <div class="m-tract-slider-control">
    <div class="m-tract-slider-btn slide-left">Prev</div>
    <div class="m-tract-slider-btn slide-right">Next</div>
  </div>
</div>

关于如何保持可开发性的更多提示：

  • 使用较短的类名（您只需要一个特定的较长类或ID来将CSS应用于特定元素。因此，请为其子代使用较短的类名。
  • 不要在同一元素的不同状态上复制/粘贴转换或转换。只需将它们置于始终处于活动状态且仅覆盖更改的属性即可。它确实提高了动画性能，并提高了理解和控制它的能力。
    • 作为最后一步，
  • 仅在您完成开发后为您的属性添加前缀;否则，它们会使你的“工作空间”混乱而不添加任何东西，真的;
  • 如果您没有理由使用em，请使用rem。如果您希望滑块的填充和边距受<body> font-size使用rem的影响。如果您希望将其固定为您在滑块上设置的内容，请使用em（并在滑块上设置font-size）。

快速破坏这些原则applied to what you have（它不完美，可以进一步简化，但我认为你会发现它更容易使用）。我还将您的CSS转换为SCSS，因为它更容易控制。

不要被SCSS吓倒。您不必使用变量和mixins（尽管它们非常强大且一旦您学习它们就很方便）。但是我相信你会发现简单的类嵌套对于初学者来说很方便 要从代码段中获取结果，请检查源代码，然后您会发现它已转换为CSS。

相关问题
最新问题