animazione della transizione CSS3 sul carico?
https://stackoverflow.com/questions/6805482
-
25-10-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
E 'possibile utilizzare l'animazione CSS3 transizione al caricamento della pagina senza usare Javascript?
Ciò è genere di quello che voglio, ma il caricamento della pagina:
http://rilwis.googlecode.com/svn/trunk/ demo / immagine-slider.html
Quello che ho trovato finora
- CSS3 transizione ritardo , un modo per effetti di delay su elementi. funziona solo su passaggio del mouse.
- CSS3 fotogramma chiave , opere in carico, ma sono estremamente lento. Non è utile a causa di questo.
- CSS3 transizione è abbastanza veloce, ma non si animano al caricamento della pagina.
Soluzione
può eseguire un CSS l'animazione al caricamento della pagina senza l'uso di JavaScript; non resta che usare CSS3 fotogrammi chiave .
Guardiamo un esempio ...
Ecco una dimostrazione di un menu di navigazione scorrevole in posizione utilizzando CSS3 solo:
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
header {
/* This section calls the slideInFromLeft animation we defined above */
animation: 1s ease-out 0s 1 slideInFromLeft;
background: #333;
padding: 30px;
}
/* Added for aesthetics */ body {margin: 0;font-family: "Segoe UI", Arial, Helvetica, Sans Serif;} a {text-decoration: none; display: inline-block; margin-right: 10px; color:#fff;}<header>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Products</a>
<a href="#">Contact</a>
</header>
Scomposizione ...
Le parti importanti sono l'animazione fotogramma chiave che noi chiamiamo slideInFromLeft ...
@keyframes slideInFromLeft {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0);
}
}
... che dice sostanzialmente "alla partenza, l'intestazione sarà fuori dal bordo sinistro dello schermo, la sua larghezza e alla fine sarà in vigore".
La seconda parte sta chiamando che l'animazione slideInFromLeft:
animation: 1s ease-out 0s 1 slideInFromLeft;
Sopra è la versione abbreviata, ma ecco la versione verbose per chiarezza:
animation-duration: 1s; /* the duration of the animation */
animation-timing-function: ease-out; /* how the animation will behave */
animation-delay: 0s; /* how long to delay the animation from starting */
animation-iteration-count: 1; /* how many times the animation will play */
animation-name: slideInFromLeft; /* the name of the animation we defined above */
Si può fare un sacco di cose interessanti, come scivolare nel contenuto, o richiamare l'attenzione su aree.
Altri suggerimenti
Molto poco Javascript è necessario:
window.onload = function() {
document.body.className += " loaded";
}
Ora il CSS:
.fadein {
opacity: 0;
-moz-transition: opacity 1.5s;
-webkit-transition: opacity 1.5s;
-o-transition: opacity 1.5s;
transition: opacity 1.5s;
}
body.loaded .fadein {
opacity: 1;
}
So che la domanda ha detto che "senza Javascript", ma penso che la pena sottolineare che non esiste una soluzione facile che coinvolge una riga di Javascript.
Potrebbe anche essere in linea Javascript, qualcosa di simile:
<body onload="document.body.className += ' loaded';" class="fadein">
Questo è tutto il codice JavaScript che è necessario.
Credo di aver trovato una sorta di lavoro in giro per la domanda OP - invece di un inizio di transizione 'on.load' della pagina - ho trovato che l'uso di un'animazione di una dissolvenza opacità nella avuto lo stesso effetto, (I era alla ricerca della stessa cosa di OP).
Così ho voluto avere la dissolvenza corpo del testo dal bianco (lo stesso dello sfondo del sito) per il colore del testo nero su caricamento della pagina - e sono stato solo di codifica dal Lunedi quindi ero alla ricerca di uno stile 'on.load' codice cosa, ma non so ancora JS - ecco il mio codice che ha funzionato bene per me.
#main p {
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0}
to { opacity: 1}
}
E per qualsiasi motivo, questo non funziona per .class solo #id di (almeno non sul mio)
Spero che questo aiuti - come so che questo sito mi aiuta molto
Bene, questo è un ingannevole.
La risposta è "non proprio".
CSS non è uno strato funzionale. Non ha alcuna consapevolezza di ciò che accade o quando. E 'utilizzato semplicemente per aggiungere un di presentazione strato di diverso "bandiere" (classi, IDS, Stati).
Per impostazione predefinita, CSS / DOM non fornisce alcun tipo di stato "sotto carico" per i CSS per l'uso. Se si voleva / stati in grado di utilizzare JavaScript, devi assegnare una classe per body o qualcosa per attivare alcune CSS.
Detto questo, è possibile creare un hack per questo. Vi darò un esempio qui, ma può o non può essere applicabile alla vostra situazione.
stiamo operando sul presupposto che "close" è "abbastanza buono":
<html>
<head>
<!-- Reference your CSS here... -->
</head>
<body>
<!-- A whole bunch of HTML here... -->
<div class="onLoad">OMG, I've loaded !</div>
</body>
</html>
Ecco un estratto del nostro foglio di stile CSS:
.onLoad
{
-webkit-animation:bounceIn 2s;
}
Siamo anche sul presupposto che i browser moderni rendono progressivamente, quindi il nostro ultimo elemento renderà scorso, e quindi questo CSS verrà attivato scorso.
Simile a @ soluzione di Rolf, ma saltare riferimento alle funzioni esterne o giocando con classe. Se l'opacità è di rimanere fissato a 1, una volta caricato, è sufficiente utilizzare script inline per modificare l'opacità direttamente tramite stile. Ad esempio
<body class="fadein" onload="this.style.opacity=1">
dove CSS sytle "fadein" è definito per @ Rolf, definendo transizione e impostazione opacità a stato iniziale (cioè 0)
L'unico problema è che questo non funziona con gli elementi SPAN o DIV, dal momento che non hanno lavoro evento onload
avviarlo con presso corpo che si inizierà quando il mouse prime si sposta sullo schermo, che è principalmente entro un secondo dopo l'arrivo, il problema è che lo stesso inverte quando fuori dello schermo.
html:hover #animateelementid, body:hover #animateelementid {rotate ....}
questo è la cosa migliore che mi viene in mente: http://jsfiddle.net/faVLX/
fullscreen: http://jsfiddle.net/faVLX/embedded/result/
Modifica vedi commenti qui sotto:
Questo non funziona su qualsiasi dispositivo touchscreen perché non c'è passaggio del mouse, in modo che l'utente non vedrà i contenuti a meno che non toccarlo. - Rich Bradshaw
Ok sono riuscito a realizzare un'animazione al caricamento della pagina utilizzando solo le transizioni CSS (sorta di!):
Ho creato 2 fogli di stile CSS: il primo è come voglio il codice HTML in stile prima che l'animazione ... e la seconda è come voglio la pagina per guardare dopo l'animazione è stata effettuata.
Non capisco appieno come ho compiuto questo, ma funziona solo quando i due file CSS (entrambi nella testa del mio documento) sono separati da alcuni javascript nel modo seguente.
Ho testato questo con Firefox, Safari e Opera. A volte le opere di animazione, a volte si salta direttamente al secondo file css e talvolta pagina sembra essere viene visualizzato carico ma nulla (forse è solo a me?)
<link media="screen,projection" type="text/css" href="first-css-file.css" rel="stylesheet" />
<script language="javascript" type="text/javascript" src="../js/jQuery JavaScript Library v1.3.2.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
// iOS Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ||
(navigator.userAgent.match(/iPad/i))) {
$(".container .menu-text").click(function(){ // Update class to point at the head of the list
});
}
});
</script>
<link media="screen,projection" type="text/css" href="second-css-file.css" rel="stylesheet" />
Ecco un link al mio sito web work-in-progress: http : //www.hankins-design.co.uk/beta2/test/index.html
Forse mi sbaglio, ma ho pensato browser che non supportano le transizioni CSS non dovrebbe avere problemi come dovrebbero passare direttamente al secondo file css senza ritardi o la durata.
Sono interessato a conoscere di vista su come motore di ricerca amichevole questo metodo è. Con il mio cappello nero su Suppongo che potrei riempire una pagina con le parole chiave e applicare un ritardo 9999s sulla sua opacità.
Mi sarebbe interessato a sapere come i motori di ricerca che fare con l'attributo di transizione di ritardo e se, utilizzando il metodo di cui sopra, avrebbero anche vedere i link e le informazioni presenti nella pagina.
Ancora più importante mi piacerebbe davvero sapere perché questo non è coerente ogni volta che la pagina viene caricata e come posso rimediare a questo!
Spero che questo può generare alcune opinioni e pareri se non altro!
se qualcun altro ha avuto problemi a fare due passaggi in una sola volta, ecco quello che ho fatto. Avevo bisogno di testo per venire da cima a fondo il caricamento della pagina.
HTML
<body class="existing-class-name" onload="document.body.classList.add('loaded')">
HTML
<div class="image-wrapper">
<img src="db-image.jpg" alt="db-image-name">
<span class="text-over-image">DB text</span>
</div>
CSS
.text-over-image {
position: absolute;
background-color: rgba(110, 186, 115, 0.8);
color: #eee;
left: 0;
width: 100%;
padding: 10px;
opacity: 0;
bottom: 100%;
-webkit-transition: opacity 2s, bottom 2s;
-moz-transition: opacity 2s, bottom 2s;
-o-transition: opacity 2s, bottom 2s;
transition: opacity 2s, bottom 2s;
}
body.loaded .text-over-image {
bottom: 0;
opacity: 1;
}
Non so perché ho sempre cercato di usare 2 dichiarazioni di transizione in 1 selettore e (non proprio) pensando che sarebbe utilizzare entrambi.
CSS solo con un ritardo di 3 secondi
alcuni punti da prendere qui:
- più animazioni in una sola chiamata
- creiamo un wait di animazione che solo ritarda quella attuale (la seconda nel nostro caso).
Codice:
header {
animation: 3s ease-out 0s 1 wait, 0.21s ease-out 3s 1 slideInFromBottom;
}
@keyframes wait {
from { transform: translateY(20px); }
to { transform: translateY(20px); }
}
@keyframes slideInFromBottom {
from { transform: translateY(20px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
Non proprio, come CSS viene applicato al più presto possibile, ma gli elementi potrebbe non essere ancora tratto. Si potrebbe immaginare un ritardo di 1 o 2 secondi, ma questo non guardare a destra per la maggior parte delle persone, a seconda della velocità della loro connessione internet.
Inoltre, se si vuole svanire qualcosa, per esempio, sarebbe necessario CSS che nasconde il contenuto da consegnare. Se l'utente non dispone di transizioni CSS3 allora non avrebbero mai vederlo.
Mi consiglia di utilizzare jQuery (per facilità di utilizzo + si potrebbe desiderare di aggiungere animazioni per altri UAS) e alcuni JS in questo modo:
$(document).ready(function() {
$('#id_to_fade_in')
.css({"opacity":0}) // Set to 0 as soon as possible – may result in flicker, but it's not hidden for users with no JS (Googlebot for instance!)
.delay(200) // Wait for a bit so the user notices it fade in
.css({"opacity":1}); // Fade it back in. Swap css for animate in legacy browsers if required.
});
Insieme con le transizioni aggiunti nel CSS. Questo ha il vantaggio di facilità permettendo l'uso di animare invece del secondo CSS nei browser legacy, se necessario.
