Chrome CSS 3 Transition n'est Pas Lisse
Salut de travail sur un site de conception pour un nouveau site et de la page d'accueil a certains flyup menus à l'aide de transitions CSS3.
Si vous allez à --------- et de prendre un coup d'oeil à la "Certains Menu qui est agréable", "un Autre Cool Menu", etc. les liens sur la page d'accueil dans google chrome, lorsque vous déplacez la souris au-dessus d'eux le flyups apparaissent, mais la transition n'est pas lisse et le menu étiquette apparaît comme il est vibrant en haut et en bas. J'ai inclus le CSS ci-dessous, mais il est disponible dans le style.fichier css sur le site (les parties pertinentes de commencer sur la ligne de 1905)
Ce n'est que dans google chrome, Safari et Firefox beau travail et IE... permet de ne pas parler de ça maintenant....
.home #site-navigation .menu-main-menu-container .trait-box {
width: 100%;
}
.home .main-navigation ul,
.home .main-navigation {
margin: none;
border: none;
}
.home .main-navigation ul li {
border: none;
}
.home .main-navigation ul li a {
margin-left: 0;
margin-right: 0;
}
.home .trait-box {
margin-top: 480px;
display: block;
text-align: center;
height: 126px;
position: relative;
color: #4e4e4d;
text-decoration: none !important;
}
.home .trait-box h4 {
position: absolute;
bottom: 35px;
width: 90%;
font-size: 16px;
font-size: 1.14285714rem;
line-height: 20px;
line-height: 1.25;
font-family: 'ProximaNovaSemibold', Arial, Helvetica;
font-weight: normal;
color: #D06F4A;
margin-left: 5%;
}
.home .trait-box figure {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
height: 0;
opacity: 0;
}
.home .trait-box figure img {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: auto;
}
.home .trait-box dl {
border-top-color: #D06F4A;
border-top-style: solid;
border-top-width: 12px;
position: absolute;
top: 0px;
}
.home .trait-box.main-menu-orange dl {
border-top-color: #D06F4A;
border-top-style: solid;
border-top-width: 12px;
}
.home .trait-box.main-menu-teal dl {
border-top-color: #405C69;
border-top-style: solid;
border-top-width: 12px;
}
.home .trait-box.main-menu-blue dl {
border-top-color: #5E7599;
border-top-style: solid;
border-top-width: 12px;
}
.home .trait-box.main-menu-green dl {
border-top-color: #A9B800;
border-top-style: solid;
border-top-width: 12px;
}
.home .trait-box dd {
font-size: 15px;
font-size: 1.07142857rem;
line-height: 19px;
line-height: 1.266666667;
margin-bottom: 12px;
font-family: Georgia, Times, 'Times New Roman', serif;
color: #595959;
padding: 0 10px;
overflow: hidden;
height: 0;
opacity: 0;
margin-top: 20px;
}
.home .trait-box dd span {
white-space: nowrap;
display: block;
width: 70%;
padding: 3px 0;
margin: 38px auto 40px;
background: #D06F4A;
font-size: 15px;
font-size: 1.07142857rem;
font-family: 'ProximaNova', Arial, Helvetica, sans-serif;
text-transform: uppercase;
padding: 5px 10px;
padding-top: 12px;
color: #ffffff;
opacity: 0;
}
.home .trait-box.main-menu-orange dd span {
background-color: #D06F4A;
}
.home .trait-box.main-menu-blue dd span {
background-color: #5E7599;
}
.home .trait-box.main-menu-teal dd span {
background-color: #405C69;
}
.home .trait-box.main-menu-green dd span {
background-color: #A9B800;
}
.home .trait-box,
.trait-box figure,
.trait-box dd,
.trait-box dl,
.trait-box dd span {
-webkit-transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98);
-webkit-transition-delay: 0;
-moz-transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98) 0;
-o-transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98) 0;
transition: all 300ms cubic-bezier(0.32, 0.22, 0.35, 0.98) 0;
}
.home .trait-box:hover,
.trait-box.expanded {
margin-top: 0;
padding-top: 400px;
-webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.4);
background: white;
}
.home .trait-box:hover figure,
.trait-box.expanded figure {
height: 184px;
opacity: 1;
}
.home .trait-box:hover dl {
margin-top: 184px;
}
.home .trait-box:hover dd,
.trait-box.expanded dd {
height: 170px;
opacity: 1;
}
.home .trait-box:hover dd span,
.trait-box.expanded dd span {
opacity: 1;
}
.home .trait-box:hover dd span:hover,
.trait-box.expanded dd span:hover {
}
.home .trait-box:hover,
.trait-box.expanded {
-webkit-transition-duration: 225ms;
-moz-transition-duration: 225ms;
-o-transition-duration: 225ms;
transition-duration: 225ms;
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
-o-transition-delay: 100ms;
transition-delay: 100ms;
}
.home .trait-box:hover figure,
.trait-box.expanded figure {
-webkit-transition-duration: 225ms;
-moz-transition-duration: 225ms;
-o-transition-duration: 225ms;
transition-duration: 225ms;
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
-o-transition-delay: 100ms;
transition-delay: 100ms;
}
.home .trait-box:hover dl,
.trait-box.expanded dl {
-webkit-transition-duration: 225ms;
-moz-transition-duration: 225ms;
-o-transition-duration: 225ms;
transition-duration: 225ms;
-webkit-transition-delay: 100ms;
-moz-transition-delay: 100ms;
-o-transition-delay: 100ms;
transition-delay: 100ms;
}
.home .trait-box:hover dd,
.trait-box.expanded dd {
-webkit-transition-duration: 540ms;
-moz-transition-duration: 540ms;
-o-transition-duration: 540ms;
transition-duration: 540ms;
-webkit-transition-delay: 500ms;
-moz-transition-delay: 500ms;
-o-transition-delay: 500ms;
transition-delay: 500ms;
}
.home .trait-box:hover dd span,
.trait-box.expanded dd span {
-webkit-transition-duration: 540ms;
-moz-transition-duration: 540ms;
-o-transition-duration: 540ms;
transition-duration: 540ms;
-webkit-transition-delay: 1100ms;
-moz-transition-delay: 1100ms;
-o-transition-delay: 1100ms;
transition-delay: 1100ms;
}
J'ai couru dans le peu d'agitation ("vibrant" comme vous le décrire) avant de trop. À partir de ce que je peux dire, c'est un Chrome bug spécifique avec des transitions CSS3. Je pense aussi que c'est spécifique à l'animation de la propriété d'opacité (c'est là que j'ai rencontré au moins). Je n'ai jamais trouvé une solution pour elle, j'ai peur, et bien que j'ai trouvé d'autres personnes sur Google avec cette question, aucun d'eux n'avait une solution. Probablement préférable de simplement animer des trucs avec jQuery au lieu de CSS3.
OriginalL'auteur dpegasusm | 2013-07-19
Vous devez vous connecter pour publier un commentaire.
Vous en êtes la cause navigateur les remboursements, qui sont coûteux et modifier la mise en page à chaque étape de l'animation, causant la jerkyness et jitterness.
Pour contourner ce problème, vous devez appliquer le positionnement absolu de vos éléments animés, en ajoutant ceci à votre CSS vous permettra de commencer:
C'est juste un point de départ, vous aurez à écrire plus de CSS pour afficher correctement vos éléments à positionnement absolu.
Qui a travaillé! Merci!
OriginalL'auteur methodofaction
Tout d'abord, je dois dire que le menu semble lisse. Je pourrais l'utiliser pour un projet. Ce thème WP utilisez-vous? Il est génial!
Sur une note plus sérieuse, il semble que la CSS animations sont seulement l'origine d'un bug de Chrome rend. J'ai deux solutions pour vous (deux d'entre eux aurait besoin d'un peu de travail):
1. L'utilisation d'animer.css pour voir si la prédéfinis CSS animations sont mieux et sont stables sur Chrome. http://daneden.me/animate/
2. Animer le menu avec jQuery, ce qui serait également une solution stable.
Votre CSS est en fait la façon dont il devrait être, mais l'agitation est juste un Chrome problème spécifique, donc, malheureusement, je vais juste dire ce que @ennui a dit: la seule façon de le faire pour Chrome est jQuery. Si c'est le seul script jQuery sur votre site, il ne serait pas le surcharger. Aussi, pour la vitesse, vous pourriez un plugin de mise en cache comme WP Super Cache pour faire de votre site rapidement.
OriginalL'auteur Shaan Singh