Dart CSS3 Переходы белого свечения не нужны

Question

Так что я начал учиться, но я начинаю. Что я хочу достичь, это смена divs с разными фонами, например 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); 
} 

Где каждый Привязать имеет простой CSS

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

Вот дротик скрипт

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; 
    } 

дротик довольно некрасиво, может быть переработан.

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

Надеюсь, это поможет.