Question

我在网站上的“工作”部分的模式弹出/库中遇到了一些奇怪的过渡行为。

它在Firefox中运行得很好，但在Chrome中，当你第二次打开其中一个投资组合链接时 - 有时是第一次 - 转换没有正确发生，显示出颠倒的图像：

弹出窗口中的图像滑块是在Owl Carousel上构建的，但我不认为问题出在那里，而是与模态转换的工作方式有关。但是，问题只出现在我使用了滑块的模态中......其他仅包含单个图像的弹出窗口没有相同的问题。

我花了最近两天的时间试图调试这个恼人的问题，这让我感到非常疯狂。我试图修复它没有任何工作 - 试图用不同的基于旋转木马的插件换掉猫头鹰旋转木马没有任何区别。我只是想让它解决，所以我可以继续下一步 - 有人请帮助我解决这个问题吗？：（

这是我的_work.scss文件：

#work.paddingstandard {
  padding-bottom: 0px !important;
}


/* ---- isotope grid---- */

#portfoliogrid .item {
  width: 20%;
  float: left;
  cursor: pointer;
  overflow: hidden;
  margin-bottom: -1px;
  padding-bottom: 0;
}

#portfoliogrid .item.width2 {
  width: 40%;

}

#portfoliogrid img {
  width: 100%;
  float: left;
  height: auto;
}

/* Item rollover */

#work .item .rollover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 15px;
  text-align: center;
}

#work .item .rollover:before {
  content: "";
  position: absolute;
  height: 50%;
  width: 50%;
  left: 25%;
  top: 26%;
  opacity: 0;
  margin-top: 40px;
  transition: all 0.2s 0.3s, opacity 0.3s 0.6s, margin-top 0.3s 0.6s;
  transform: rotateZ(-45deg);
  -webkit-transition: all 0.2s 0.3s, opacity 0.3s 0.6s, margin-top 0.3s 0.6s;
  -webkit-transform: rotateZ(-45deg);
  background:rgba(196, 71, 65, 0.85);

}

#work .item.width2 .rollover:before {
  width: 25%;
  left: 38%;

}

#work .item .rollover .centerContainer {
  opacity: 0;
  height: 100%;
  transition: all 0.3s 0.1s;
  transform: rotateZ(-5deg);
  -webkit-transition: all 0.3s 0.1s;
  -webkit-transform: rotateZ(-5deg);

}

#work .item .rollover .centerContainer a {
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: $white;
  display: block;
  text-transform: uppercase;
  text-decoration: none !important;

  &.details {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02rem;
    color: $grey-800;
  }

}

#work .item .rollover .centerContainer .title {
  font-size: 2.8rem;
  line-height: 2.8rem;
  margin-bottom: 15px;
}

#work .item:hover .rollover:before,
#work .portfolioActive .rollover:before {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 1;
  margin-top: 0;
  transition: all 0.3s 0.4s, opacity 0.2s 0.1s, margin-top 0.3s 0.1s;
  transform: rotateZ(0deg);
  -webkit-transition: all 0.3s 0.4s, opacity 0.2s 0.1s, margin-top 0.3s 0.1s;
  -webkit-transform: rotateZ(0deg);

}

#work .item:hover .centerContainer,
#work .portfolioActive .centerContainer {
  opacity: 1;
  transition: all 0.3s 0.6s;
  transform: rotateZ(0deg);
  -webkit-transition: all 0.3s 0.6s;
  -webkit-transform: rotateZ(0deg);

}



/* WORK OPEN ANIMATION */

@keyframes turn {
  0% {
    transform: rotate(45deg);
  }

  15% {
    transform: rotate(135deg);
  }

  25% {
    transform: rotate(135deg);
  }

  40% {
    transform: rotate(225deg);
  }

  50% {
    transform: rotate(225deg);
  }

  65% {
    transform: rotate(315deg);
  }

  75% {
    transform: rotate(315deg);
  }

  90% {
    transform: rotate(405deg);
  }

  100% {
    transform: rotate(405deg);
  }

}

#workLoader {
  position: absolute;
  z-index: 10000;
  -webkit-transition: all 0.8s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;

}

#workLoader .iconloader {
  position: relative;
  z-index: 20;
  display: block;
  margin: 0 auto;
  width: 30px;
  height: 100%;
  width: 100%;

}

#workLoader .iconloader:after {
  content: "";
  width: 50%;
  height: 50%;
  position: absolute;
  top: 25%;
  left: 25%;
  background-color: rgba(196, 71, 65, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.55);
  transform: rotateZ(45deg);
  animation: turn 4s cubic-bezier(0.86, 0, 0.07, 1) infinite;
  -webkit-transform: rotateZ(45deg);
  -webkit-animation: turn 4s cubic-bezier(0.86, 0, 0.07, 1) infinite;
  -ms-transform: rotate(45deg);

}

#workLoader.width2 .iconloader:after {
  width: 25%;
  left: 38%;
}

#workLoader .front, #workLoader .back {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

}

#workLoader .front {
  text-align: center;
  z-index: 0;
}

#workLoader .front img {
  width: 100%;
  opacity: 0.2;
}

#workLoader .back {
  background-color: rgba(20, 20, 20, .95);
  transform: rotateX(180deg);
  -webkit-transform: rotateX(180deg);

}

#workLoader .back #wrkclosebtn {
  position: fixed;
  top: 10px;
  right: 20px;

}

#workLoader .back .fa-times {
  font-size: 2rem;
  cursor: pointer;
  color: #5f5f5f

}

#workLoader .back .fa-times:hover {
  color: #FFFFFF
}

.scale100 {
  width: 100% !important;
  height: 100% !important;
  left: 0 !important;
  transform: perspective(1000px) rotateX(-180deg);
  -webkit-transform: perspective(1000px) rotateX(-180deg);

}

#workdetailcontainer.darkBackground {
  padding-top: 40px;
}

/* FIX IE 9/10/11 */

.IE #workLoader {
  transition: all .8s !important;
  transform: none;
}

.IE #workLoader .front, .IE #workLoader .back {
  transition: all .8s !important;
}

.IE #workLoader .back {
  transform: perspective(1000px) rotateX(180deg) !important;
}

.IE #wrkclosebtn {
  display: none;
}

.IE .scale100 #wrkclosebtn {
  display: inline;
}

.IE .scale100 {
  transition: none !important;
  transform: rotateX(0deg) !important;
}

.IE #workLoader.scale100 .back {
  transform: perspective(1000px) rotateX(0deg) !important;
  z-index: 10;

}

.IE #workLoader.scale100 .front {
  transform: perspective(1000px) rotateX(-180deg) !important;
}

.IE9 #workLoader {
  background-color: green;
  opacity: 0;
}

/* ==========================================================================

  WORK DETAILS

========================================================================== */

#workdetail {
  padding: 40px 0;

  h1 {
    color: #FFFFFF;
    line-height: 4rem;
    margin-bottom: 35px;
    margin-top: 0px;
    font-size: 4rem;
    text-align: left;
  }

  p {
    @include safe-rem(margin-bottom, 25);
    color: $white
  }

}


#workdetail #detailImg img {
  width: 100%;
}

#workdetail .workDouble #detailImg {
  margin-bottom: 35px;
}


#workdetail #details {
  margin-bottom: 35px;
  font-size: 0.9rem;

  span {
    @include safe-rem(padding-right, 8);
    color: $red-100;
  }

  li {
    @include safe-rem(margin-bottom, 12);
    color: $white;
  }

}


/* ==========================================================================

  ISOTOPE FILTERS GENERAL

========================================================================== */

.isotopeFilter {
  margin-top: 25px;
  margin-bottom: 40px;
}

.isotopeFilter a {
  @include safe-rem(padding, 0 25 0 25);
  font-size: 1.250rem;
}

.isotopeFilter .is-checked {
  color: $red;
}

这是主HTML的一个例子：

   <div id="portfoliogrid">
        <!-- Begin item -->
        <div class="item width2 ui">
            <div class="rollover">
                <div class="centerContainer hidden-xs">
                    <div>
                        <a class="title" href="$ThemeDir/work-gallery-1.html">STARTUP BROS</a>
                        <a class="details" href="$ThemeDir/work-gallery-1.html">VIEW DETAILS</a>
                    </div>
                </div>
            </div>
            <!-- Item Image -->
            <img src="$ThemeDir/img/work/startupbros-1.jpg" alt="Portfolio" />
        </div>

这是一个模式弹出窗口中的HTML示例：

<div id="workdetail">

    <section class="container">

        <div class="workDouble">

            <div id="detailImg">

                <div id="sliderwork1" class="owl-carousel">

                    <div class="item"><img src="themes/portfolio/img/work/startupbros-large-1.jpg" alt="Startup Bros" /></div>

                    <div class="item"><img src="themes/portfolio/img/work/startupbros-large-2.jpg" alt="Startup Bros" /></div>

                    <div class="item"><img src="themes/portfolio/img/work/startupbros-large-3.jpg" alt="Startup Bros" /></div>

                    <div class="item"><img src="themes/portfolio/img/work/startupbros-large-4.jpg" alt="Startup Bros" /></div>

                </div>

            </div>

            <article>

                <h1>STARTUP BROS</h1>

                <p>Pellentesque erat velit, pretium vitae dui tempor, scelerisque posuere mi. Etiam fringilla scelerisque nulla volutpat vehicula. Donec tempus ut diam ac pharetra. Quisque quis odio convallis, imperdiet purus dignissim, tempor urna. Curabitur ut nisl nec orci scelerisque vehicula vitae eu nunc. Mauris et felis ligula. Maecenas tincidunt, augue a pulvinar laoreet, arcu nunc semper felis, lobortis gravida elit tellus non nisl.</p>

                <ul id="details">

                    <li><span>CLIENT:</span>Company Name</li>

                    <li><span>RELEASE DATE:</span>20 February 2014</li>

                    <li><span>TAGS:</span>Photography, Corporate, Flat</li>

                </ul>

                <a href="https://www.behance.net/gallery/47278647/StartupBros-UI-concepts-WIP" target="_blank>"><button class="large" href="#">LAUNCH PROJECT</button></a>

            </article>

        </div>

    </section>

</div>

<!-- End content of project details -->

<script data-scriptdetail="">

    $(document).ready(function() {

        var $sliderwork = $("#sliderwork1");

        if($sliderwork.length){

            $sliderwork .owlCarousel({

                loop : true,

                animateIn: 'backSlideIn',

                animateOut: 'backSlideOut',

                autoplay: true,

                autoplayTimeout: 3000,

                margin : 20,

                nav: false,

                dots: false,

                items : 1

            });
        }
    });

</script>

Answer 1

我无法复制您的问题，但我的猜测是Chrome不会重置您打开的投资组合的状态，因为您只是在关闭叠加时隐藏它（而不是反转过渡）。这里有太多让我确定这是什么，但你可能会指定一个animation-fill-mode。这会通知浏览器将哪个状态用作起始/终结点。它可以帮助您重置＆＃34;重置＆＃34;的东西。 https://developer.mozilla.org/en-US/docs/Web/CSS/animation-fill-mode

另一个策略是非常简单的事情，并开始添加动画，直到你遇到问题为止。

最后，对于更复杂的过渡，使用像http://velocityjs.org/这样的JS库通常更有益，然后您可以将过渡/动画链接在一起。您将获得更精细的控制，并避免乱砍您的CSS以使其发挥作用。

模态弹出/图库（Chrome）

1 个答案: