Problem z usuwaniem animacji i pokaż pełny rozmiar obrazu HTML / CSS / JS

Question 1

Piszę mini projekt w html, css, js. Mam obraz o szerokości 20%, który porusza się z nieskończoną animacją od lewej do prawej. na przykład:

.img {
    width: 20%,
    animation: move infinite;
}
@keyframes move {
    from {
        left: 100%;
    }
    to {
        left: -50%;
    }
}

Chcę, aby po naciśnięciu obrazu znalazł się na środku ekranu z jego rzeczywistą szerokością. Mój problem polega na tym, że kiedy usuwam klasę animacji (ponieważ musi przestać się poruszać), tracę lewy i górny atrybut obrazu, a także przejście z szerokości 20% do pełnej szerokości nie działa płynnie. Jakieś pomysły, jak można to wdrożyć?

Dzięki

javascript css animation css-animations

1

Thodoris 19 grudzień 2019, 23:06

Answer

Zasadniczo wymagania w pytaniu zostały wpisane poprawnie. Problem polega na tym, że nie kodujesz krok po kroku tego, co chcesz. Przeczytaj ponownie swoje wymagania, takie jak:

1. Mam obraz o szerokości 20%, który porusza się z nieskończoną animacją od lewej do prawej

2. Chcę, aby po naciśnięciu obrazu znalazł się na środku ekranu z rzeczywistą szerokością.

3. Mój problem polega na tym, że usuwam klasę animacji (ponieważ musi się zatrzymać)

Tak więc zasadniczo są 3 stany:

the image z dowolnymi stylami, klasa obrazu => .img
animation obraz ma jakąś animację, klasa animacji => .animate
finished na pewnym etapie mamy "zakończony" stan animacji, ukończona klasa => .finish

W ten sposób zdefiniowałeś trzy stany w CSS, w których możesz później po prostu dodać/usunąć właściwości dla dowolnego danego stanu i możesz dodać/usunąć klasy do elementu (w tym przypadku obrazu).

(Ponieważ bardzo trudno jest kliknąć ruchomy element, stworzyłem wrapper z obszarem kliknięcia. Oczywiście możesz zmienić detektor zdarzenia kliknięcia z powrotem na obraz i spróbować, naprawdę trudno go kliknąć ...)

var image = document.querySelector('img');
var clickArea = document.querySelector('.click-area');
clickArea.addEventListener('click', function(){
    image.classList.add('finish');
    image.classList.remove('animate');
});

.wrapper {
  position: relative;
  width: 100%;
  height: 300px;
  border: solid 2px orange;
}

.img {
    position: absolute;
}

.finish {
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
    -moz-transform: translate(-50%, -50%); /* Firefox */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -o-transform: translate(-50%, -50%); /* Opera */
}

.animate {
    width: 20%;
    animation: move infinite 2s;
}

@keyframes move {
    from { left: 100%; }
    to { left: -50%; }
}

<div class="wrapper click-area">
  <img class="img animate" src="https://picsum.photos/200/300" />
</div>

Jeśli na tej samej stronie znajduje się wiele takich obrazów, to prawie tak samo! Sam odkryj różnice.

var clickAreas = document.querySelectorAll('.click-area');

[...clickAreas].forEach(function(clickArea){
    var image = clickArea.querySelector('img'); // find only the image inside the click-area
    clickArea.addEventListener('click', function(){
        image.classList.add('finish');
        image.classList.remove('animate');
    });
});

.wrapper {
  position: relative;
  width: 100%;
  height: 100px; /* tweaked the height so we can see more the just one */
  border: solid 2px orange;
}

.img {
    position: absolute;
    width: auto;  /* tweaked the height so we can see more the just one */
    height: 100px;  /* tweaked the height so we can see more the just one */
}

.finish {
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%); /* Safari and Chrome */
    -moz-transform: translate(-50%, -50%); /* Firefox */
    -ms-transform: translate(-50%, -50%); /* IE 9 */
    -o-transform: translate(-50%, -50%); /* Opera */
}

.animate {
    width: 20%;
    animation: move infinite 2s;
}

@keyframes move {
    from { left: 100%; }
    to { left: -50%; }
}

<div class="wrapper click-area">
  <img class="img animate" src="https://picsum.photos/200/300" />
</div>
<div class="wrapper click-area">
  <img class="img animate" src="https://picsum.photos/200/300" />
</div>
<div class="wrapper click-area">
  <img class="img animate" src="https://picsum.photos/200/300" />
</div>

0

Community 20 czerwiec 2020, 12:12

Question 2