Question

所以我开始学习，所以我是初学者。我想要实现的是改变具有不同背景的div，例如here。在教程中完成，但我想用背景特性来做，因为我不希望我的图像可以拖动。

所发生的是，不是每个图像相互流动并改变颜色，我会发出一些白色的光芒。有什么帮助吗？

这是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代码在这里和那里重构。在#imageContainer类下添加opaque块元素可能会阻止您的目标。你的例子看起来像这样：

对于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');
}

希望这有帮助。

Dart CSS3 Transitions白光不想要

1 个答案: