Question

我制作了一个简单的幻灯片。它有一个进度条，指示一个简单的5秒计时器（然后移至下一张幻灯片）。条形图上有一个奇怪的黑色部分，该部分显示在铬上。我想知道为什么会这样。

您可以在这里看到运行中的惊人代码...

https://codepen.io/Matiny/pen/pGEXGa

问题的屏幕截图...

https://i.imgur.com/2BsnlA0.png

以下是您所看到的内容的快速摘要...

我在绝对位置上有4条。由于每5秒增加一个类，该函数正在扩展并变得可见。

我知道我可以将scaleX（50）的宽度更改为50％，但这会占用更多的浏览器资源。

显然，我还必须通过Codepen链接显示我的代码，所以我们开始...

HTML

 <div class="container">
      <div class="row align-items-md-center justify-content-md-start justify-content-center">
<div class="slideshow shadow col-6">
          <figure>
            <img src="https://queentessence.io/static/img/icons/back-button.svg" alt="left arrow" class="back-arrow">
            <img src="https://queentessence.io/static/img/icons/front-button.svg" alt="right arrow" class="front-arrow">
            <div class="slide-bg">
              <div class="service-image">
                <i class="material-icons play-button">play_arrow</i>
                <i class="material-icons pause-button play-pause">pause</i>
                <img src="https://queentessence.io/static/img/icons/analytics.png" alt="" class="icon-1 slide-animate">
                <img src="https://queentessence.io/static/img/icons/security.png" alt="" class="icon-2">
                <img src="https://queentessence.io/static/img/icons/dashboard.png" alt="" class="icon-3">
                <img src="https://queentessence.io/static/img/icons/customize.png" alt="" class="icon-4">
              </div>
            </div>

            <figcaption>
              <h3 class="name text-center">Advanced Analytics</h3>
              <div class="all-bars">
                <div class="load-bar bar1"></div>
                <div class="load-bar bar2"></div>
                <div class="load-bar bar3"></div>
                <div class="load-bar bar4"></div>
              </div>
              <p class="description text-center"></p>
              <a href="#">
                <div class="btn-group-toggle text-center feature-button">
                  <button class="btn btn-yes bg-light-1">
                    READ MORE <i class="material-icons">
                      arrow_forward
                    </i>
                  </button>
                </div>
              </a>
            </figcaption>
          </figure>
        </div>
        </div>
  </div>

SCSS

    @import url('https://fonts.googleapis.com/css?family=Mukta:700');

@mixin positions($number1, $number2) {
  position: absolute;
  left: $number1;
  top: $number2;
  transform: translate(-$number1,-$number2);
}

.slideshow {
  position: relative;
  margin-top: 2.5%;
}

.slideshow figure {
  height: 100%;
  width: 35vw;
  margin: 0 auto;
}

.slideshow figcaption {
  width: 100%;
  margin: 2.5% auto;
}

.slide-bg {
  height: 20vw;
  width: 100%;
  background-image: url(https://queentessence.io/static/img/slide-bg.jpg);
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}

.service-image {
  height: 100%;
  width: 45%;
  margin: 0 auto;
  position: relative;
}

.icon-1, .icon-2, .icon-3, .icon-4 {
  width: 100%;
  position: absolute;
  top: 80%;
  left: 0;
  transform: translate(25%, -80%);
  opacity: 0;
  transition: all .75s;
}

.slide-animate {
  transform: translate(0, -80%);
  opacity: 1;
}

.name, .description {
  margin: 0 auto
}

.play-button, .pause-button {
  opacity: .75;
  position: absolute;
  @include positions(50%, 5%);
  font-size: 2.5vw;
}

.play-pause {
  opacity: 0;
}

.name, .h3-style {
  width: 100%;
  font-family: 'Mukta', 'sans-serif';
  font-size: 2vw;
}

.description {
  width: 85%;
  font-size: 1.25vw;
}

.all-bars {
  position: relative;
  width: 100%;
  height: 2vw;
}


.load-bar {
  position: absolute;
  left: 50%;
  top: 45%;
  background-color: aqua;
  height: .25vw;
  width: 1%;
  visibility: hidden;
}

.full-bar {
  transition: 5s transform;
  transform: scaleX(50);
  // width: 50%;
  visibility: visible;
}

.feature-button {
  margin: 5% 0;
}

.back-arrow {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 15%;
  cursor: pointer;
}

.front-arrow {
  position: absolute;
  top: 50%;
  right: 0%;
  transform: translate(50%, -50%);
  width: 15%;
  cursor: pointer;
  z-index: 10;
}

.box {
  height: 12.5vw;
  border-radius: 5%;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

a:active, a:focus, a:hover {
  text-decoration: none;
}

.analytics {
  background-image: url(https://queentessence.io/static/img/icons/analytics.png);
}

.security {
  background-image: url(https://queentessence.io/static/img/icons/security.png);
}

.dashboard {
  background-image: url(https://queentessence.io/static/img/icons/dashboard.png);
}

.customize {
  background-image: url(https://queentessence.io/static/img/icons/customize.png);
}

jQuery

      // Controls the slideshow

  $(".bar4").addClass("full-bar");

  var slider;

  var modular = "Drag and drop tiles to customize your dashboard's stats.";

  var secure = "Gain the tools to keep your network secure and properly tracked.";

  var splash = "Effortlessly update your venue's splash page with our simple page editor.";

  var analytics = "Work with a variety of data to better suit your business.";

  function slideForward() {
    $(".pause-button").addClass("play-pause").siblings("i").removeClass("play-pause");
    $(".bar1").hasClass("full-bar") ?
    changeSlide(".icon-2", "Modular Dashboard", modular, ".bar2") :
    $(".bar2").hasClass("full-bar") ?
    changeSlide(".icon-3", "Powerful Splash Page Editor", splash, ".bar3") :
    $(".bar3").hasClass("full-bar") ?
    changeSlide(".icon-4", "Safe & Secure", secure, ".bar4") :
    $(".bar4").hasClass("full-bar") ?
    changeSlide(".icon-1", "Advanced Analytics", analytics, ".bar1") :
    null;

    slider = setTimeout(function() {
      slideForward();
    }, 5000);
  }

  function slideBackward() {
    $(".play-button").addClass("play-pause").siblings("i").removeClass("play-pause");
    $(".bar1").hasClass("full-bar") ?
    changeSlide(".icon-4", "Safe & Secure", secure, ".bar4") :
    $(".bar4").hasClass("full-bar") ?
    changeSlide(".icon-3", "Powerful Splash Page Editor", splash, ".bar3") :
    $(".bar3").hasClass("full-bar") ?
    changeSlide(".icon-2", "Modular Dashboard", modular, ".bar2") :
    $(".bar2").hasClass("full-bar") ?
    changeSlide(".icon-1", "Advanced Analytics", analytics, ".bar1") :
    null;
  }

  slideForward();

  function changeSlide(icon, title, subtitle, loadbar) {
    $(icon).addClass("slide-animate").siblings().removeClass("slide-animate");
    $(".name").text(title);
    $(".description").text(subtitle);
    $(loadbar).addClass("full-bar").siblings(".load-bar").removeClass("full-bar");
  }

  function slideshow() {
    $(".front-arrow").click(function() {
      clearTimeout(slider);
      slideForward();
    })

    $(".back-arrow").click(function() {
      clearTimeout(slider);
      slideBackward();
    })
  }

  slideshow();

Answer 1

在Chrome中将轮廓设置为透明对我来说很有效

{
    xtype: "combobox",
    id: "rolesBox",
    alias: "widget.rolesbox",
    store: Ext.create("MyApp.store.users.Roles"),
    listeners: {
        afterRender: function (combobox) {
            this.select(combobox.store.getData().items[0]);
        }
    }
}

如何删除进度条上的黑条（Chrome故障）？

1 个答案: