wake-up-neo.net

wie warten Sie, bis der Übergang zum CSS abgeschlossen ist, bevor Sie die nächste Klasse anwenden?

Ich versuche Text zum "Schwingen" zu bringen, indem ich einen Rotationsübergang in eine Richtung und dann eine Rotation in die andere Richtung wende, wenn er darüber schwebt. Sie wartet jedoch nicht auf den Abschluss des ersten Übergangs, sodass nur der letzte Übergang angewendet wird. Wie kann ich es zwingen, zu warten, bis der erste Übergang abgeschlossen ist? JSfiddle: http://jsfiddle.net/hari_shanx/VRTAf/7/

HTML: 

<div id="chandelier">
    <nav>
        <ul id="chandelier-list">
            <li id="logo-home" class="swing"><a href="#home" class="scrollPage">home</a>

            </li>
            <li id="logo-about" class="swing"><a href="#about" class="scrollPage">about us</a>

            </li>
            <li id="logo-range" class="swing"><a href="#range" class="scrollPage">our range</a>

            </li>
            <li id="logo-contact" class="swing"><a href="#contact" class="scrollPage">contact us</a>

            </li>
            <li id="logo-blog" class="swing"><a href="#blog" class="scrollPage">blog</a>

            </li>
        </ul>
    </nav>
</div>

CSS: 

.swing {
    position: absolute;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    writing-mode: lr-tb;
    -webkit-transform-Origin: right top;
    -moz-transform-Origin: right top;
    -ms-transform-Origin: right top;
    -o-transform-Origin: right top;
    transform-Origin: right top;
    font-size: 18px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.swing1 {
    -webkit-transform: rotate(-80deg);
    -moz-transform: rotate(-80deg);
    -o-transform: rotate(-80deg);
    transform: rotate(-80deg);
}
.swing2 {
    -webkit-transform: rotate(-97deg);
    -moz-transform: rotate(-97deg);
    -o-transform: rotate(-97deg);
    transform: rotate(-97deg);
}
.swing3 {
    -webkit-transform: rotate(-85deg);
    -moz-transform: rotate(-85deg);
    -o-transform: rotate(-85deg);
    transform: rotate(-85deg);
}
.swing4 {
    -webkit-transform: rotate(-92deg);
    -moz-transform: rotate(-92deg);
    -o-transform: rotate(-92deg);
    transform: rotate(-92deg);
}
.swing5 {
    -webkit-transform: rotate(-89deg);
    -moz-transform: rotate(-89deg);
    -o-transform: rotate(-89deg);
    transform: rotate(-89deg);
}
#logo-home {
    top: 0;
    left: -32px;
}
#logo-about {
    top: 0;
    left: -17px;
}
#logo-range {
    top: 0;
    left: 14px;
}
#logo-contact {
    top: 0;
    left: 48px;
}
#logo-blog {
    top: 0;
    left: 135px;
}
#chandelier nav ul li a {
    text-decoration: none;
}
#chandelier nav ul {
    list-style-type: none;
}

JS: 

$('.swing').hover(

function () {
    $(this).addClass('swing1');
    $(this).addClass('swing2');
},

function () {
    $(this).removeClass('swing1');
    $(this).removeClass('swing2');
});
24
babbaggeii

Jeder Browser verfügt über ein eigenes Ereignis, das Sie zum Erkennen des Übergangsendes verwenden können. Binden Sie einfach so:

$(".yourClass").on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', 
    function() {
         //doSomething
    });
38
Tomzan

Wenden Sie einfach eine Klasse mit jQuery an, und den Rest erledigen Sie mit CSS. Sie können den Prozentsatz der Zeit in Keyframes verwenden, um zu bestimmen, was während der Animation passiert. So wie:

@keyframes name {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-20deg); }
  100% { transform: rotate(360deg); } }
@-o-keyframes name {
  0% { -o-transform: rotate(0deg); }
  50% { -o-transform: rotate(-20deg); }
  100% { -o-transform: rotate(360deg); } } 
@-moz-keyframes name {
  0% { -moz-transform: rotate(0deg); }
  50% { -moz-transform: rotate(-20deg); }
  100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes name {
  0% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(-20deg); }
  100% { -webkit-transform: rotate(360deg); } }
3
Coop

Für css3-Übergänge mit jquery empfehle ich die Verwendung von jquery.transit . Es bietet eine jquery.animate wie API und Callbacks, die in Ihrem Fall funktionieren würden.

0
Mythli