Jak ustawić CSS przejście do nowego elementu lub zrobić to samo z JavaScript

Cześć Widziałem jedno menu CSS3, która ma bardzo ładne przejścia:Jak ustawić CSS przejście do nowego elementu lub zrobić to samo z JavaScript

transition: all 0.3s ease 0.1s;

chcę zastosować to samo przejście do mojego stolika. Mam tabelę, która po kliknięciu w wiersz tabeli, nowy wiersz jest dodawany po kliknięciu wiersza i jest wyświetlany lub ukryty.

Podobnie jak w poniższym kodzie (clickedTableRow ma wartość selektor jQuery dla klikniętego wiersza):

clickedTableRow.after('<tr style="display:none;"><td>some content</td></tr>'); 
clickedTableRow.next().slideDown(3000);

Zamiast slideDown jak mogę zastosować powyższą przejście css do nowo dodany wiersz tabeli lub czy istnieje odpowiednik javascript?

aktualizacja Pytanie:

Może powinienem rephrase. Jaki jest najlepszy sposób, aby powoli ześlizgnąć się z kilku nowo utworzonych treści?

Wydaje się:

clickedTableRow.after('<tr><td>some content</td></tr>').slideDown(3000);

wygląda tak samo jak

clickedTableRow.after('<tr><td>some content</td></tr>');

Bez efektu slideDown, co ja tu brakuje?

Źródło

2012-10-15 London

http://api.jquery.com/animate/ przeczytaj to, co pomoże na pewno. –

Dzięki, że już przeszedłem i próbowałem wielu rzeczy, dlatego właśnie tu trafiłem Musiałem zrobić coś złego oczywiście – London

Naprawdę wpadłem w to, może chcesz zacząć nagrodę za to. –

dodać css do arkusza stylów jak

.transition{ 
    transition: all 0.3s ease 0.1s; 
    }

następnie

clickedTableRow.next().addClass('transition');

Źródło

2012-10-15 11:10:39 fuzionpro

dzięki za odpowiedź. jak to się różni od odpowiedzi poniżej? – London

Dude nie ma odpowiedzi poniżej lol – ankur

@ankur: istnieje odpowiednik (prawie) identyczna, jeśli masz dość reputacji. Po prostu została usunięta w pół godziny po przesłaniu odpowiedzi przez * fusionpro *. –

Jeśli jestem zrozumienia pytanie rację, są dynamicznie dodając pewne treści do tabeli (za pośrednictwem ajax?) I zamiast po prostu pojawi się na dole tabeli, chcesz go wysunąć?

Co brakuje jest hide():

clickedTableRow.after('<tr><td>some content</td></tr>').hide().slideDown(3000);

.slideDown(speed) jest alternatywą dla .show(speed), ale też pracować element musi być ukryte, albo za pomocą CSS (display:none) lub przez .hide(speed) ing go.

[Edycja]

wiersze tabeli przedstawiają szczególne trudności animacji, ponieważ przeglądarek wykorzystują różne wartości (Tabela rzędzie i bloków) za widoczną wyświetlacza właściwości. Metody .hide() i .show() bez animacji są zawsze bezpieczne w użyciu z wierszami tabeli. Od wersji jQuery 1.1.3 można również używać .fadeIn() i .fadeOut().

Aby naprawić, należy zawinąć zawartość w div i pokazać, że.Stworzyłem jsFiddle:

http://jsfiddle.net/VXe6r/

Źródło

2012-10-19 09:20:12

Tak, powyżej rozwiązanie byłoby to zrobić przy użyciu biblioteki jQuery animowany. Można to również zrobić za pomocą css3.

Nie manipulowane kodu dla każdej fantazyjne zachowanie, mam nadzieję, że idea jest jasna:

HTML:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<meta charset=utf-8 /> 
<title>Slide Add Row</title> 
</head> 
<body> 
<table> 
    <tr><td>some content</td></tr> 
</table> 
</body> 
</html>

CSS:

div { 
     -moz-animation-duration: 1s; 
     -webkit-animation-duration: 1s; 
     -moz-animation-name: slidein; 
     -webkit-animation-name: slidein; 
    position:relative; 
    } 

    @-moz-keyframes slidein { 
     from { 
      top:-20px; 
     } 

     to { 
      top:0px; 
     } 
    } 

    @-webkit-keyframes slidein { 
     from { 
      top:-20px; 
     } 

     to { 
      top:0px; 
     } 
    }

i JS (tylko dla dynamiczne dodawanie wierszy:

$('table').on('click', function(){ 
    $tbody = $(this).find('tbody:last'); 
    $tbody.after('<tr><td><div>new</div></td></tr>'); 
});

Żywy demo:

http://jsbin.com/unacog/9/

Punkty do uwaga:

Dane w TD musi być opakowane, istniejące implemntation z CSS3 ożywionej nie będzie działać inaczej.
Brak obsługi przeglądarki IE, ofcourse, działa w przeglądarce Chrome, FireFox i Safari.

BTW - Korzystanie animacji CSS daje wolność na wiele innych sposobów, aby bawić się z animacji, na przykład, w oparciu o font-size: http://jsbin.com/unacog/11/

Źródło

2012-10-19 21:09:23

http://jsfiddle.net/xMRhE/4/

$itemBeingAdded = $("<div class='inner start-animation'></div>");  
    $testTable.append($itemBeingAdded); 
    setTimeout(function() { 
     $itemBeingAdded.removeClass("start-animation"); 
    }, 100);

a css efekt slajdu:

.inner { 
    height : 50px; 
    -moz-transition: all 0.3s ease 0.1s; 
    -webkit-transition: all 0.3s ease 0.1s; 
    transition: all 0.3s ease 0.1s; 
    background : #ded; 
    border : 1px solid #999; 
} 

.inner.start-animation { 
    height : 0px; 
}

Th to jest moje podejście. Instad zsuwania się, po prostu animuj wysokość od 0 do 100% normalnej wysokości.

Odbywa się to poprzez dodanie wiersza tabeli, elementu, elementu div lub klasy podstawowej i klasy "start", która dodaje style początkowego stanu (lub klatki kluczowej) do animacji. Wkrótce po dodaniu elementu do DOM usuniesz klasę początkowych klatek kluczowych.

Przeglądarka następnie oblicza, co ma do animowania, aby element wygląda to obok „frame” określa właściwości, które faktycznie mają wpływ na to w tym czasie.

Źródło

2012-10-25 08:00:10

"Jaki jest najlepszy sposób na powolne ześlizgiwanie się z niektórych nowo utworzonych treści ?"

Umieść zawartość w pojemniku, który ją wstępnie ukrywa. Następnie slideDown rodzica, aby odsłonić nowo dodane dziecko.

To będzie bardzo trudne z wierszem tabeli (<tr>), ponieważ tabela nie jest tego samego typu elementem blokowym co <div>, <span>, <p>, etc. - jest unikatową bestią i nie wszystkie przeglądarki ją oswajają ta sama droga. (Wyjaśniłem całkiem dobrze w this S.O. question)

Więc - jeśli to ja - uczyniłbym mój stół i komórki ściśle semantyczne, i zawijałem stół w coś, co mogłoby ukryć rzędy (gdybym był zmuszony użyć tabela):

http://jsfiddle.net/25uQr/ (tak, spędziłem zbyt wiele czasu na to)

za to, co opisano w swoim poście, to bym użył <ul>,<ol>, or <dl>. Ich dzieci zachowują się jak wiersz tabeli, ale są elementami blokowymi ... więc manipulacja jest całkiem prosta, a przeglądarka bezpieczna (ish) er.

Źródło

2012-10-25 19:52:58 Dawson

Jak ustawić CSS przejście do nowego elementu lub zrobić to samo z JavaScript

Odpowiedz

Powiązane problemy