div einblenden mit transition

[kleppi]

Hallo zusammen,

ich cklicke auf ein Div mit einem Bild , dann wird ein größeres div auf der Seite angezeigt mit einer Bildvergrößerung und einem Text darunter.
Das funktioniert auch so, nur das div erscheint sofort ohne transition

das ist ein Auszug aus meinem Code:

        div = document.createElement('div');
	div.id = "box"   
	div.innerHTML = text;
	div.style.opacity = "0"
	document.body.appendChild(div);     
	div.style.visibility = "visible";
	div.style.opacity = "1"

und hier meine CSS Anweisung:

#box {transition:opacity 2s ease-out;}

wer kennt sich aus damit.

Gruß Klaus

[Kahmoon]

Du musst immer alle Anweisungen für die unterschiedlichen BRowser mit reinschreiben wenn es per CSS Transistion passieren soll.

.example {
    -webkit-transition: background-color 500ms ease-out 1s;
    -moz-transition: background-color 500ms ease-out 1s;
    -o-transition: background-color 500ms ease-out 1s;
    transition: background-color 500ms ease-out 1s;
}

Wenn du das per Javascript einblendest....würde ich den fadein darüber machen. z.B. http://api.jquery.com/toggle/

[Spooky]

Die prefixes braucht man bei transition (fast) nicht mehr, alle neuen Browser, die das unterstützen, können es auch schon ohne prefix: http://caniuse.com/#feat=css-transitions . Nur mehr -webkit- für Android 4.1 und 4.3.

[Spooky]

@kleppi: mach's mal nur mit

var div = document.createElement('div');
div.id = "box"   
div.innerHTML = text;
document.body.appendChild(div); 

und

@keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}

@-webkit-keyframes fadein {
    from {opacity: 0;}
    to {opacity: 1;}
}

#box {
    animation-name: fadein;
    animation-duration: 1s;
    animation-timing-function: ease-out;

    -webkit-animation-name: fadein;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-out;
} 

http://jsfiddle.net/pkqm4zod/

[kleppi]

Hi Spooky,

war ne schnelle Lösung und hat funktioniert, danke.

Gruß Klaus

[kleppi]

Hallo Spooky,

wie kann ich denn meine Box mit transition wieder ausblenden.

Klaus