Jak mogę uzyskać efekt ześlizgu, taki jak slideback w jQuery, ale tylko przy użyciu CSS?

Wystąpił problem z animacjami CSS3. Nie obsługują właściwości "auto" wysokości (i szerokości, marginesów itp.). Jaki jest najlepszy sposób tworzenia animacji poślizgu CSS3 bez znajomości dokładnej wysokości elementu?Jak mogę uzyskać efekt ześlizgu, taki jak slideback w jQuery, ale tylko przy użyciu CSS?

Pytanie jest podobne do this, ale zaakceptowana odpowiedź nie odpowiada na faktyczne pytanie, ponieważ nie dotyczy problemu obliczenia wysokości elementu, który ma zostać przesunięty.

Źródło

2011-10-06 Ron Reiter

Nie jestem pewien, czy pytasz * dokładnie * to samo, ale spójrz na to: http://stackoverflow.com/questions/5072526/css-3-equivalent-to-jquery -slideup-and-slidedown – thirtydot

@thirtydot, tam nie ma właściwego rozwiązania problemu. Jedynym rozwiązaniem zbliżonym do problemu z automatyczną zmianą wysokości jest użycie animacji wysokości linii, która wygląda źle i jest kompatybilna tylko z tekstem. –

@thirtydot, Ponadto zaakceptowana odpowiedź nie rozwiązuje problemu. –

Widzieliście to demo I wykopali na tym odpowiedź? http://jsfiddle.net/XUjAH/6/

Próbowałem napisać własne, ale wydawało się, że nie działa.

Źródło

2011-10-06 15:12:05 Blender

Szkoda, że nie było bardziej solidne rozwiązanie, być może niektóre jQuery plugin tak: https://github.com/benbarnett/jQuery-Animate-Enhanced –

Co jest nie tak z tą wtyczką? 'slideDown' jest po prostu' animate ({height: 'toggle'}); '. – Blender

Oto wiadomość od Ben, autor: Hej Niestety, musiałem napisać funkcję, aby uniknąć przyspieszenia tych przejść, ponieważ powodowało to pewne dziwne problemy z wyświetlaniem. Jeśli przyjrzeć się tej funkcji: _isBoxShortcut() na linii 354: https://github.com/benbarnett/jQuery-Animate-Enhanced/blob/master/scripts/src/jquery.animate-enhanced.js# L354 Chciałbym znaleźć sposób, aby zmusić ich do pracy. Jeśli chcesz mieć zabawę, po prostu ustaw funkcję "return false", a wtyczka zamieni wszystkie skróty slideDown, SlideUp i slideToggle na animacje CSS3. –

-1

Sprawdź to: http://jsfiddle.net/gion_13/eNR6Q/ To tylko animacja css3. do użycia w innych przeglądarkach zmień/dodaj specyficzne dla przeglądarki prefiksy css: "-moz" dla firefox, "-webkit" dla chrome & safari, "-o" dla opery i "-ms" dla np.

Źródło

2011-10-06 13:44:09

nie jest dobrą odpowiedzią, ponieważ nie zajmuje się automatyczną wysokością. dzięki jednak –

Możesz wiedzieć wysokość elementu poprzez jego duplikowanie, ustawienie jego wysokości na "auto" i zapytanie o jego wysokość w pikselach.

powiedzieć, jest to div chcesz animować na: <div id="mydiv" style="height:0px">, użyj tego kodu, aby dowiedzieć się, jego wysokość (przy użyciu jQuery tylko dla uproszczenia):

var divHeight = $("#mydiv").clone().css("height", "auto").height();

Źródło

2011-10-06 15:04:30 dutzi

Hej @dutzi, dlaczego potrzebujesz go sklonować? Dlaczego nie po prostu ustawić wysokość automatyczną i zmierzyć jej wysokość? –

Ponieważ niektóre przeglądarki mogą próbować renderować element w jego "nowej" wysokości, zanim go zmienisz, powodując migotanie.Można zmienić jego „Display” na „None” przed, chociaż ... – dutzi

używam to:

.slide-down { 
    transition: max-height .3s ease-out, opacity .3s ease-out, margin .3s ease-out; 
    overflow: hidden; 
    max-height: 100px; 

    &.collapsed { 
    max-height: 0; 
    opacity: 0; 
    margin: 0; 
    } 
}

Możesz użyć zmiennej w czasie trwania efektu i łagodzenie jeśli używasz mniej lub Sass.
Aby wywołać efekt, należy użyć używać $('.slide-down').toggleClass('collapsed').
Jeśli 100px to za mało dla Twojego kontenera, ustaw inną maksymalną wysokość , używając dodatkowej klasy CSS w elemencie.
Jeśli masz ochotę, spróbuj użyć cubic-bezier(0.17, 0.04, 0.03, 0.94) zamiast ease-out.

Źródło

2015-02-17 16:52:12

Jak mogę uzyskać efekt ześlizgu, taki jak slideback w jQuery, ale tylko przy użyciu CSS?

Odpowiedz

Powiązane problemy