滑动前元素短暂闪烁，干扰滑块的平滑度答案

【问题标题】：Element flashing briefly before sliding, interfering with the smoothness of the slider滑动前元素短暂闪烁，干扰滑块的平滑度
【发布时间】：2015-04-16 14:20:37
【问题描述】：

我一直在制作我自己的滑块版本，有许多不同的迭代，我觉得我几乎可以实现我想要的功能。

这里是滑块的演示：http://codepen.io/zephyr/pen/ZYgwNX

代码：

HTML：

<div class="slider">
  <ul>
    <li>
      <img src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-7.jpg" alt="This is a picture of stuff in the sea" title="Sea">
    </li>
    <li>
      <img src="https://cdn.photographylife.com/wp-content/uploads/2014/06/Nikon-D810-Image-Sample-6.jpg" alt="This is a picture of an island with a beach" title="Beach">
    </li>
    <li>
      <img src="http://hdwallpaperia.com/wp-content/uploads/2013/12/Nature-Image-Wallpapers-HD-1024x576.jpg" alt="This is a picture of a night city" title="City">
    </li>
    <li>
      <img src="http://wallpoper.com/images/00/43/54/14/sakura-cherry-blossom_00435414.jpg" alt="These are some sakura blossoms" title="Sakura Blossoms">
    </li>
    <div class="arrows left"></div>
    <div class="arrows right"></div>
  </ul>
</div>
<div class="picture-description">
  <div class="wrap">
    <div class="title"></div>
    <div class="description"></div>
  </div>
</div>

CSS：

body {margin:0;}

*,*:before,*:after {
  transition:all 0.3s;
  -webkit-transition:all 0.3s;
  box-sizing:border-box;
}

.slider,
.slider-info {
  position:relative;
  float:left;
  width:50%;
  overflow:hidden;
}

.picture-description {
  position:relative;
  float:left;
  width: 50%;
  background-color:#eee;
}

.picture-description .wrap {
  position:relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align:center;
  font-weight:300;
}

.title {
  font-size:24px;
  letter-spacing:1px;
}
.description {
  font-size:16px;
  letter-spacing:1px;
}

.slider ul {
  position:relative;
  float:left;
  width:100%;
  height:100%;
  list-style:none;
  margin:0;
  padding:0;
}

.slider ul li {
  position:absolute;
  padding:0;
  width:100%;
  transition:none;
  -webkit-transition:none;
  overflow:hidden;
}

.slider ul li img {
  position: absolute;
  top: -9999px;
  bottom: -9999px;
  left: -9999px;
  right: -9999px;
  margin: auto;
  max-height: 100%;
  max-width: initial;
  width: auto;
  height: auto;
  display: inline-block;
}

@media (min-width:1200px){
  .slider,
  .slider ul li,
  .picture-description {
    min-height: 300px;
  }
}
@media (min-width:768px){
  .slider,
  .slider ul li,
  .picture-description {
    height: calc(50vh - 52.5px);
    min-height: 370px;
  }
}


@media (max-height:530px) and (min-width:768px){
  .slider,
  .slider ul li,
  .picture-description {
    height: calc(100vh - 105px);
    min-height: 400px;
  }
}

@media (max-width:768px){
  .slider,
  .picture-description {
    width:100%;
  }
  .slider,
  .slider ul li,
  .picture-description {
    height:calc(50vh - 52.5px);
    min-height:calc(50vh - 52.5px);
    max-height:calc(50vh - 52.5px);
  }
}



/**
* iPad with portrait orientation.
*/
@media all and (device-width: 768px)
and (device-height: 1024px)
and (orientation:portrait){
  .slider,
  .slider ul li,
  .picture-description {
    height: 1024px;
  }
}

/**
* iPad with landscape orientation.
*/
@media all and (device-width: 768px)
and (device-height: 1024px)
and (orientation:landscape){
  .slider,
  .slider ul li,
  .picture-description {
    height: 768px;
  }
}

/**
* iPhone 5
* You can also target devices with aspect ratio.
*/
@media screen and (device-aspect-ratio: 40/71) {
  .slider,
  .slider ul li,
  .picture-description {
    height: 500px;
  }
}


.arrows {
  position:absolute;
  height:100%;
  width:80px;
  top: 0;
  cursor:pointer;
  z-index:3;
}

.arrows.left {
  left:0;
}
.arrows.right {
  right:0;
}

.arrows.left:hover,
.arrows.left:active,
.arrows.left:focus {
  box-shadow: 40px 0 40px rgba(0,0,0,0.1) inset;
}
.arrows.right:hover,
.arrows.right:active,
.arrows.right:focus {
  box-shadow: -40px 0 40px rgba(0,0,0,0.1) inset;
}

.arrows:after {
  content:'';
  border-bottom: 4px solid #000;
  border-right: 4px solid #000;
  height: 40px;
  width: 40px;
  position: absolute;
  top: calc(50% - 20px);
}

.arrows.left:after {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  left: 20px;
}
.arrows.left:hover:after {
  border-width: 3px;
  left: 15px;
}
.arrows.left:active:after,
.arrows.left:focus:after {
  border-width: 4px;
  left: 17px;
}

.arrows.right:after {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  right: 20px;
}
.arrows.right:hover:after {
  border-width: 3px;
  right: 15px;
}
.arrows.right:active:after,
.arrows.right:focus:after {
  border-width: 4px;
  right: 17px;
}

jQuery:

$.fn.slideIt = function(desc){
  var slider = $(this);
  var slides = slider.find('li');
  slides.each(function(a,b){
    $(this).attr('data-slide',a);
    if(a == 0){
      $(this).addClass('active');
    }
    if(a > 0){
      $(this).addClass('inactive');
    }
  });

  var ua = navigator.userAgent;
  var events = (ua.match(/iPad/i)) ? 'touchstart' : 'click';
  slider.find('.arrows')
            .on(events,function(e){
    if($(this).hasClass('left')){
      slider.find('.active')
                .slideLeft(slider);
      /*slider.find('.active')
                .slideDown(slider);*/
    }
    if($(this).hasClass('right')){
      slider.find('.active')
                .slideRight(slider);
      /*slider.find('.active')
                .slideUp(slider);*/
    }
    slider.slideInfo(desc);
  });
}

$.fn.slideLeft = function(slider){
  var slide = $(this);
  slide.css({'left':'0'});
  slider.find('li:not(.active)')
            .css({'left':'-100%'});

  var next = slide.prev('li');
  if(
    parseInt(slide.attr('data-slide'))
        <=
    0
  ){
    next = slider.find('li')
                         .last();
  }

  slide.stop()
         .animate({'left':'100%'},600)
         .css({'left':'-100%'});
  next.stop()
        .animate({'left':'0'},600);

  slide.removeClass('active')
         .addClass('inactive');
  next.removeClass('inactive')
        .addClass('active');
}

$.fn.slideRight = function(slider){
  var slide = $(this);
  slider.find('li:not(.active)')
            .css({'left':'100%'});
  slide.css({'left':'0'});

  var next = slide.next('li');
  if(
    parseInt(slide.attr('data-slide')) + 1
        >= 
    slider.find('li').length
  ){
    next = slider.find('li')
                         .first();
  }

  slide.stop()
         .animate({'left':'-100%'},600)
         .css({'left':'100%'});
  next.stop()
        .animate({'left':'0'},600);

  slide.removeClass('active')
         .addClass('inactive');
  next.removeClass('inactive')
        .addClass('active');
}

$.fn.slideUp = function(slider){
  var slide = $(this);
  slider.find('li:not(.active)')
            .css({'top':'-100%'});
  slide.css({'top':'0'});

  var next = slide.next('li');
  if(
    parseInt(slide.attr('data-slide')) + 1
        >= 
    slider.find('li').length
  ){
    next = slider.find('li')
                         .first();
  }

  slide.stop()
         .animate({'top':'100%'},600)
         .css({'top':'-100%'});
  next.stop()
        .animate({'top':'0'},600);

  slide.removeClass('active')
         .addClass('inactive');
  next.removeClass('inactive')
        .addClass('active');
}

$.fn.slideDown = function(slider){
  var slide = $(this);
  slide.css({'top':'0'});
  slider.find('li:not(.active)')
            .css({'top':'100%'});

  var next = slide.prev('li');
  if(
    parseInt(slide.attr('data-slide'))
        <=
    0
  ){
    next = slider.find('li')
                         .last();
  }

  slide.stop()
         .animate({'top':'-100%'},600)
         .css({'top':'100%'});
  next.stop()
        .animate({'top':'0'},600);

  slide.removeClass('active')
         .addClass('inactive');
  next.removeClass('inactive')
        .addClass('active');
}

$.fn.slideInfo = function(el){
  var alt = $(this).find('.active img')
                                 .attr('alt');
  var title = $(this).find('.active img')
                                     .attr('title');
  $(el).find('.title')
         .text(title);
  $(el).find('.description')
         .text(alt);
}

$(document).ready(function(){
  $('.slider').slideIt('.picture-description');
  $('.slider').slideInfo('.picture-description');
});

由于某种原因，元素在每次转换之前都会闪烁一毫秒，并且在切换选项卡等时，它不会立即执行操作（即它会变成空白一秒钟然后切换到下一张幻灯片）。

我不确定为什么会发生这种情况，如果能提供任何帮助，我将不胜感激！

【问题讨论】：

您是否尝试过仅使用 CSS 过渡而不是 JQuery？看起来你正在使用两者的混合，但到目前为止我只是简单地浏览了代码。
我将它用于按钮和幻灯片的排列，但实际上是在制作幻灯片，因为我想要过渡原样（尽管没有闪光灯）我使用了 jQuery，类添加和删除是为了便于遍历，而不是添加或删除样式，z-index 之所以存在只是因为我认为由于某种原因它可能会在过渡时闪烁，但显然不是。
另外，我不确定如何使用唯一的 css 转换来做到这一点
我可以稍微整理一下。基本上，您只想使用 JQuery 从您的 div 中添加/删除类并更新标题。您可以将实际的过渡内容留给 CSS。我会在 CodePen 上写点东西，然后在今天晚些时候发布。
嗯，我可能没有时间重构它并获得一个好的解决方案，但这里有一篇关于我所做的非常相似的博客文章。它没有做任何媒体查询的事情，但基本上它的结构方式允许我添加任意数量的图像并简单地旋转它们。你可以修改它来做你在这里做的事情，根据你的箭头函数旋转，只需将下一个和上一个状态设置为溢出中的隐藏位置，然后修改函数中的标题。 blog.wakeskaterstudio.com/2014/09/…

标签： javascript jquery html css slider

【解决方案1】：

问题似乎在于使用 jquery css 和动画的组合。将其全部更改为动画，例如：

  slide.stop()
         .animate({left:'100%'},600,
                function(){
                                slide.animate({left:'-100%'},0);
                            });
  next.stop()
        .animate({'left':'0'},600);

而不是

  slide.stop()
         .animate({'left':'100%'},600)
         .css({'left':'-100%'});
  next.stop()
        .animate({'left':'0'},600);

【讨论】：