problem z transition

Question

Cześć! Na mojej stronie umieściłem taki kod js

<script>
$(document).ready(function(){
    $("#button").click(function(){
        $(".more").toggleClass("active");
    });
});
</script>

Rozwijana galeria działa, lecz bez żadnej animacji. Dodałem w css w klasie active 

transition: transform 1s ease-in-out;

Nadal żadnej animacji nie widać. Co mogę jeszcze zrobić? Pozdrawiam

Answer 1

Transition jedynie służy do ustalania długości, efektu, ewentualnie opóźnienia czasu animacji. Nie wiemy co zdefiniowałeś dla transform przy tym, jak element "more" ma klasę i jej nie ma :)

Comments

Rozumiem. Czyli w more daję transform, a w active transition i powinno działać?

---

Dla obu dajesz transform, od tego zależy jak wygląda animacja. Transition dajesz tylko do more, chyba że nie chcesz, aby się animowało w obie strony.

 

Kod mniej więcej tak powinien wyglądać:

.more {
   transform: translateX(-100%);
   transition: transform .5s ease;
}

.more.active {
   transform: translateX(0);
}

 

Tutaj masz przesunięcie elementu o 100% w poziomie. Animacja jest płynna w obie strony.

---

Dziękuję bardzo za pomoc :D. Zauważyłem, że trochę błędów mam w tym kodzie. Postaram się poprawić i dam znać. Pozdrawiam i wesołych świąt :)

---

Niestety nadal nic :/ Wygląda to tak

<div id="obrazy">
	<div class="obraz"><img src="img/obrazy/obraz1.jpg"></div>
	<div class="obraz"><img src="img/obrazy/obraz2.jpg"></div>
	<div class="obraz"><img src="img/obrazy/obraz3.jpg"></div>
	<div style="clear:both"></div>
	
	
	<div class="more">
	<div class="obraz"><img src="img/obrazy/obraz7.jpg"></div>
	<div class="obraz"><img src="img/obrazy/obraz8.jpg"></div>
	<div class="obraz"><img src="img/obrazy/obraz9.jpg"></div>
	<div style="clear:both"></div>
	<div class="obraz"><img src="img/obrazy/obraz10.jpg"></div>
	<div class="obraz"><img src="img/obrazy/obraz11.jpg"></div>
	<div class="obraz"><img src="img/obrazy/obraz12.jpg"></div>
	
	</div>
	<div id="przycisk">Pokaż więcej</div>

.obraz
{
float: left;
 margin-bottom: 5vh;
width: 30%;
margin-left: 3%;
position: relative;
  }



.more {
	display: none;
	transform: translateX(-100%); /*Tutaj dałem + oraz - nic to nie zmienia*/
   transition: transform .5s ease;
}


.more.active
{
	transform: translateX(0);
}
.active
{
display: block;
transform: translateX(0);
}

<script>
$(document).ready(function(){
    $("#przycisk").click(function(){
        $(".more").toggleClass("active");
    });
});
</script>

Przepraszam, że zawracam głowę, ale zupełnie nie potrafię sobie z tym poradzić :(

---

Dla klasy more masz display: none, dlatego nic nie jest widoczne.

---

Racja, teraz wszystko fajnie, ale pojawia się kolejny problem. Jest ogromny margines między ostatnim zdjęciem a przyciskiem "pokaż więcej" Da się coś z tym zrobić?

---

Ogólnie to zrezygnuj z float'ów i przesiądź się na flexbox'a. Co do doładowywania itemów (bo o to tak naprawdę Ci chodzi), to robi się to w trochę inny sposób :)

Jedynym pomysłem na to, żeby tej przerwy nie było to pozycja absolutna dla tego wiersza, jednak będzie wtedy kłopot (dużo kombinowania) z animacją itd.

Na Twoim miejscu po prostu bym podpatrzył jak inni takie sprawy rozwiązują. Na innych stronach, są pewnie tutoriale do podobnych rzeczy i zrobić tak samo. Nie ma co wymyślać koła od nowa ;)

---

Bardzo dziękuję :)