Jak stworzyć animację animowany rollover strzałki

Question

Chcę, aby przycisk dachowania jak https://www.plantflags.com/en/

Ten efekt stron internetowych przyciski rollover. Przykład: jeśli rolujesz na przycisku, tekst powinien zanikać, a strzałka powinna pochodzić z lewej strony i tworzyć. Po rozwinięciu strzałka przechodzi na prawą stronę i zanika, a tekst ponownie znika.

Przykład: jeśli przejdziesz do tej strony i przekręcisz ten przycisk, zrozumiesz.

Uczyłem ich kodu spowoduje CSS mogę zrozumieć, ale jest to kwestia, która JS nie mogę zrozumieć.

Czy możesz dowiedzieć się, w jaki sposób mogę sprawić, aby był to taki rodzaj efektu przewracania.

There kod html jak atrybut

<a href="#" class="promo__button" data-module="modules/AnimatedArrowButton" data-contact-button>Tell me more</a> 

tam

dane modules/AnimatedArrowButton faktycznie nazwać js i stworzyć większą rozpiętość

Demo bez efektu https://jsfiddle.net/cyber007/78pshojd/

Answer 1

Oto moje pierwsze podanie. Starałem się ograniczyć do minimum marże; jedynym dodatkiem jest rozpiętość tekstu. Strzałka jest tworzona przez pseudo elements. Jest to czysto dekoracyjne i nie byłoby semantyczne, jeśli skonstruowane z innych elementów, moim zdaniem.

<a href="#" class="promo__button"> 
    <span>Tell me more</span> 
</a> 

https://jsfiddle.net/6ewvbq75/

Starałem się utrzymać czystość kodu i komentowane. Kilka ważnych bitów:

1. Zauważysz, że część animacji jest odtwarzana po wczytaniu strony. To znany problem, można zastosować klasę animacji po najechaniu myszą. Wygląda to równie dobrze, ale unika się niewygodnej animacji tych przycisków podczas ładowania strony: https://jsfiddle.net/b5sc9xrp/

2. Wszystkie animacje są przechowywane na klatkach kluczowych na końcu.on hover lub on mouse over animacja jest stosowana z przypisaniem do, na przykład dyrektywy .button:hover span. on mouse out jest przypisany w standardowej deklaracji .button span, co jest trochę sprzeczne z intuicją i dlatego warto o tym wspomnieć. W końcu nie ma żadnego :un-hover.

3. Słowo kluczowe w przypisaniu animacji oznacza, że ​​animacja będzie odtwarzana tylko do przodu i zatrzyma się na niej. To jest kluczowe. Na przykład, gdy przesuniemy tekst w prawo i znikniemy, chcemy, aby pozostało na ostatniej klatce kluczowej. Bez wartości forwards animacja przeskoczyłaby z powrotem do klatki kluczowej 1.

4. Stworzyłem elementy strzałek o szerokości 2 pikseli. Wydaje mi się, że wygląda lepiej i mniej skocznie niż wersja 1px, ale jest łatwa do dostosowania.

Daj mi znać, jeśli masz jeszcze jakieś pytania. To było zabawne małe demo do zbudowania.

Answer 2

Jeśli chcesz proste rozwiązanie, proponuję przy użyciu tylko CSS transition, z wyjątkiem zmiany jednej klasy za pomocą javascript, aby mieć inną animację do zanikania i zmniejszania.

Take następującą strukturę:

<a class="promo__button exit"> 
    <span class="arrowleft"> 
    <span>*the arrow that comes from the left*</span> 
    </span> 
    <span class="message"> 
    <span>*the text*</span> 
    </span> 
    <span class="arrowleft"> 
    <span>*the arrow that disappears to the right*</span> 
    </span> 
</a> 

następnie w css można mieć te 6 selektorów:

.promo__button .message span { 
    //the css for the text when it is visible 
} 

.promo__button:hover .message span { 
    //the aditional css for the text when it is faded out 
} 

.promo__button .arrowleft span { 
    //the css for the arrow before it came in from the left (invisible) 
} 

.promo__button:hover .arrowleft span { 
    //the aditional css to make the arrow visible 
} 

.promo__button .arrowright span { 
    //the css for the arrow after it went away to the right side 
} 

.promo__button:hover .arrowright span { 
    //the aditional css to make the arrow visible 
} 

teraz dodać .promo__button * * { transition: left 0.2s, opacity, 0.2s} dla wszystkich wartości, które zmieniły się od normalnego unosić

użyj dwóch klas, aby ukryć niechcianą animację strzałki:

.promo__button.enter .arrowright {display:none} 
.promo__button.exit .arrowleft {display:none} 

i użyj javascript aby przełączyć enter/exit onmouseenter

Answer 3

Możesz mieszać css i jQuery, aby osiągnąć ten efekt (ponieważ oznaczyłeś swoje pytanie jQuery).

var timeout = null; 
 
var transitionEnd = true; 
 

 
jQuery('.line').on("mouseenter", function() { 
 
    if (!transitionEnd) 
 
    return; 
 

 
    _this = jQuery(this); 
 

 
    _this.addClass("hide-text"); 
 

 
    timeout = setTimeout(function() { 
 
    _this.addClass("in"); 
 
    }, 300); 
 

 
    transitionEnd = false; 
 
}).on("mouseleave", function() { 
 
    clearTimeout(timeout); 
 

 
    jQuery(this).addClass("out").one("transitionend", function() { 
 
    transitionEnd = true; 
 
    jQuery(this).removeClass("hide-text out in"); 
 
    }); 
 

 

 
});

.line { 
 
    background-color: red; 
 
    border: 1px solid; 
 
    border-radius: 5px; 
 
    color: white; 
 
    cursor: pointer; 
 
    display: block; 
 
    float: left; 
 
    font-size: 25px; 
 
    height: 70px; 
 
    line-height: 70px; 
 
    margin: 30px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    text-align: center; 
 
    width: 200px; 
 
} 
 
.line::after { 
 
    content: " "; 
 
    border-top: 1px solid white; 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 100%; 
 
    left: -150%; 
 
    transition: left 0.5s, right 0.3s; 
 
    opacity: 0; 
 
} 
 
.line::before { 
 
    border-right: 1px solid white; 
 
    border-top: 1px solid white; 
 
    content: " "; 
 
    height: 10px; 
 
    position: absolute; 
 
    right: 20%; 
 
    top: calc(50% - 5px); 
 
    transform: rotate(45deg) scale(0.2); 
 
    transition: all 0.5s ease 0s; 
 
    width: 10px; 
 
    opacity: 0; 
 
} 
 
.line span, 
 
.line.out span { 
 
    opacity: 1; 
 
    transition: 0.5s; 
 
    transition-delay: 0.1s; 
 
} 
 
.line.hide-text span { 
 
    opacity: 0; 
 
} 
 
.line.in::after { 
 
    left: 20%; 
 
    right: 20%; 
 
    opacity: 1; 
 
} 
 
.line.in::before { 
 
    transform: rotate(45deg) scale(1); 
 
    opacity: 1; 
 
} 
 
.line.out::before { 
 
    right: -100%; 
 
    transition-delay: 0s; 
 
} 
 
.line.out::after { 
 
    left: 100%; 
 
    right: -150%; 
 
    transition: left 0.3s, right 0.3s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='line'> 
 
    <span class='text'>Button Text</span> 
 
</div>

Answer 4

jestem pozytywny przycisk nie wymaga JavaScript.

Oto ramy wysoki poziom tylko w HTML i CSS: https://jsfiddle.net/gsvcaLrt/1/

button { 
 
    background-color: red; 
 
    border: none; 
 
    padding: 1rem; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.arrow { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    position: absolute; 
 
    transform: translateX(-30px); 
 
    transition: 0.4s; 
 
} 
 
button:hover .arrow { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transform: translateX(0px); 
 
} 
 

 
.text { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transition: 0.4s; 
 
    display: inline-block; 
 
} 
 
/* hide button on hover */ 
 
button:hover .text { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transform: translateX(30px); 
 
}

<button> 
 
    <span class="arrow">--></span> 
 
    <span class="text">Hello</span> 
 
</button>

Można dodać więcej szczegółów do różnych części sekwencji animacji CSS.

Answer 5

Wiem, że jest za późno, ale może być interesujące. Użyłem animacji css tylko po &, zanim użyto pseudo klas.

body { 
 
    font-family: "Helvetica Neue", sans-serif; 
 
    background: #f8f8f8; 
 
} 
 

 
.promo { 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 

 
.promo__button { 
 
    border: 1px solid #fff; 
 
    display: inline-block; 
 
    position: relative; 
 
    margin-top: 1.5em; 
 
    font-size: 24px; 
 
    padding: 20px 50px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-weight: 700; 
 
    line-height: 1; 
 
    letter-spacing: .025em; 
 
    text-align: center; 
 
    color: #fff; 
 
    background: #E21710; 
 
    overflow: hidden; 
 
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); 
 
    
 
} 
 

 
.promo__button:after { 
 
    content: ''; 
 
    position: absolute; 
 
    display: block; 
 
    left: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: #fff; 
 
    transform: scaleY(0); 
 
    transform-origin: bottom; 
 
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); 
 
} 
 

 
.text { 
 
    transform: matrix(1, 0, 0, 1, 0, 0); 
 
    display: block; 
 
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); 
 
} 
 

 
.arrow { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translate(-300%, -50%); 
 
    width: 80px; 
 
    height: 1px; 
 
    background: #E21710; 
 
    display: inline-block; 
 
    z-index: 1; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); 
 
} 
 

 
.arrow:after, 
 
.arrow:before { 
 
    content: ''; 
 
    position: absolute; 
 
    right: -3px; 
 
    display: block; 
 
    width: 20px; 
 
    height: 1px; 
 
    background: #E21710; 
 
    z-index: 2; 
 
} 
 

 
.arrow:after { 
 
    top: 7px; 
 
    transform: rotate(-45deg); 
 
} 
 

 
.arrow:before { 
 
    transform: rotate(45deg); 
 
    top: -7px; 
 
} 
 

 
.promo__button:hover .text { 
 
    transform: translateX(200%); 
 
} 
 

 
.promo__button:hover .arrow { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.promo__button:hover { 
 
\t box-shadow: 0 0 37px 10px rgba(0, 0, 0, 0.02); 
 
} 
 
.promo__button:hover:after { 
 
    transform: scaleY(1); 
 
}

<div class="promo"> 
 
    <a href="#" class="promo__button" data-module="modules/AnimatedArrowButton" data-contact-button> 
 
\t \t \t <span class="text">Tell me more</span> 
 
\t \t \t <span class="arrow"></span> 
 
    </a> 
 

 
</div>

.