Dart CSS3过渡期不需要白色发光

Question

所以我刚开始学习，所以我是一个初学者。我想实现的是改变不同背景的人物，就像这里一样。在教程中完成了，但我想用背景属性，因为我不希望我的图像是可拖动的。

所发生的是，而不是每个图像相互流动和改变颜色，我得到一些白光发生。任何帮助吗?

Html

<p id="transitionControls">
  <span>Snap1</span>
  <span>Snap2</span>
  <span>Snap3</span>
  <span>Snap4</span>
  <span>Snap5</span>
  <span>Snap6</span>
  <span>Snap7</span>
</p>  
<div id="imageContainer" class='opaque'>
  <div id="Snap7"  class="snap"></div>
  <div id="Snap6"  class="snap"></div>
  <div id="Snap5"  class="snap"></div>
  <div id="Snap4"  class="snap"></div>
  <div id="Snap3"  class="snap"></div>
  <div id="Snap2"  class="snap"></div>
  <div id="Snap1"  class="snap"></div>
  </div>

CSS:

div{
  position:absolute;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  background-size: 100% 100%;
  margin:auto;
  transition: opacity 1s ease-in-out;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
div.snap {
  opacity:0;
}
div.opaque{
  opacity:1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
 } 

每个Snap都有简单的CSS

#Snap1 {
background: url('img/Snap_1.jpg') no-repeat;
width: 1680px;
height: 1350px;
}

这是dart脚本

import 'dart:html';
DivElement div;
var counter = 0;
void main() {
  query("#transitionControls")
    ..onClick.listen(changeDiv);
}
//
void changeDiv(MouseEvent event) {

  SpanElement snap = event.target;
  var text = snap.text;
  div = query(".opaque");

  query("#$text").classes.add("opaque");
  div.classes.remove("opaque");
  }

Answer 1

一些重新定位的CSS属性。一些Dart代码重构在这里和那里。在opaque类下添加#imageContainer块元素可能会阻碍您的目标。您的示例看起来像这样:

对于DOM:

<p id="transitionControls">
  <span>Snap1</span>
  <span>Snap2</span>
  <span>Snap3</span>
</p>
<div id="imageContainer">
  <div id="Snap1" class="opaque"></div>
  <div id="Snap2" class="snap"></div>
  <div id="Snap3" class="snap"></div>
</div>

对于CSS:

  #imageContainer {
    position: relative;
    height: 24rem;
    background-color: #ddd;
    margin: auto;
  }
  #imageContainer .snap,
  #imageContainer .opaque {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    -o-transition: opacity 1s ease-in-out;
    transition: opacity 1s ease-in-out;
  }
  .snap {
    z-index: 1;
    opacity: 0;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
  }
  .opaque {
    z-index: 2;
    opacity: 1;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=1);
  }
  #Snap1 {
    background-color: green;
  }
  #Snap2 {
    background-color: blue;
  }
  #Snap3 {
    background-color: red;
  }

Dart很丑，可以重构。

import 'dart:html';
final triggers = query('#transitionControls');
main() {
  triggers.onClick.listen(changeDiv);
}
changeDiv(Event event) {
  SpanElement snap = event.target;
  // Fade the current opaque layer.
  query('#imageContainer .opaque').classes
      ..remove('opaque')
      ..add('snap');
  // Reveal the target layer.
  query('#${snap.text}').classes
      ..remove('snap')
      ..add('opaque');
}