Elementy przejścia poniżej przeniesionego v-if

Question

Mam dwa elementy, a widoczność górnego jest kontrolowana przez v-if na prostej wartości logicznej.

transition(name="fade") 
    #element1(v-if="showFirst") 
     p Foo 

#element2 
    p Bar 

Pierwszym elementem jest owinięty w <transition> znacznika dokładnie jak na Vue documentation.

Jednak podczas gdy tworzy się zanikająca animacja, reszta treści na stronie wciąż przeskakuje bardzo wstrząsająco.

Jak utworzyć przejście, które będzie również płynnie przekształcać pozycję wszystkich rodzeństwa, które następują?

A fiddle Demoing this issue.

Answer 1

Musisz użyć transition-group i wprowadzić swoją dynamiczną div i statycznych div

<transition-group name="fade"> 
    <div v-if="switc" key="dynamic" class="animated"> 
    ... 
    </div> 
    <div key="main-content" class="animated"> 
    ... 
    </div> 
</transition-group> 

i używać tej css klas

.fade-enter, 
.fade-leave-active { 
    opacity: 0; 
    transform: translateY(-10px); 
} 
.fade-leave-active { 
    position: absolute; 
} 

.animated { 
    transition: all 0.5s; 
    /*display: flex;*/ 
    width: 100%; 
} 

Prawdziwą sztuką jest zmienić position do absolute przy wyjeździe, a następnie każda inna treść może zająć właściwą pozycję.

Aby dowiedzieć się więcej na temat Vue animować rzeczy proszę zobaczyć ten FLIP explanation post

I proszę zobaczyć ten skrzypce roboczą https://jsfiddle.net/bjfhth7c/4/

Edycja

Przez pomyłkę zrobiłem ustawiony display: flex; w .animated klasy, że sprawiał, że każdy element wewnętrzny renderował się w dziwny sposób.

Więc teraz, całkowicie usunąć .animate klasę, a zamiast tego zastosować transition: all 0.5s i width:100% do każdego bezpośredniego wewnętrznego elementu .wrapper

moim ostatnim SCSS wygląda następująco:

.wrapper { 
    display: flex; 
    flex-direction: column; 
    >* { 
    transition: all 0.5s; 
    width:100%; 
    }; 
} 

.fade-enter, 
.fade-leave-active { 
    opacity: 0; 
    transform: translateY(-10px); 
} 

.fade-leave-active { 
    position: absolute; 
} 

Flex układ jest rozszerzyć przedmiot , ale w skrócie dla tego konkretnego przypadku, flex-direction: column układa elementy jeden, który poprzednio był mieszkiem.

Jeśli jeden z tych elementów ma pozycję absolutną, zostanie zignorowany w układzie flex, więc wszelkie inne elementy zostaną ponownie rozdzielone na dostępnej przestrzeni.

Proszę zobaczyć ten guide o flexbox i ostatnim working fiddle nadzieję, że to pomaga.

Answer 2

vue js zapewnia różne transition classes, musisz użyć tych poprawnie, aby wygładzić przejście, Próbowałem z twoim przykładem w tym fiddle z niektórymi CSS, spójrz.

.fade-enter-active, .fade-leave-active { 
    transition: all .5s; 
    height: 100px; 
    opacity: 0.5; 
} 
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ { 
    height: 0px; 
    opacity: 0; 
} 

Niektóre dane z dokumentacją:

Istnieje sześć klas wnioskowane może wejść/wyjść przejścia.

1. v-enter: Stan początkowy dla enter. Dodano element przed wstawieniem, usunięto jedną klatkę po wstawieniu elementu.
2. v-enter-active: Stan aktywny dla enter. Stosowane podczas całej fazy wchodzenia. Dodano element przed wstawieniem, usunięty po zakończeniu przejścia/animacji. Klasy tej można użyć do zdefiniowania krzywej czasu trwania, opóźnienia i łagodzenia dla wprowadzanego przejścia.
3. v-enter-to: Dostępne tylko w wersjach> = 2.1.8. Stan zakończenia dla wejścia. Dodano jedną klatkę po wstawieniu elementu (w tym samym czasie usunięto v-enter), usunięto po zakończeniu przejścia/animacji.
4. v-leave: Stan początkowy dla urlopu. Dodano natychmiast po uruchomieniu przejścia, które zostało usunięte po jednej klatce.
5. v-leave-active: Aktywny stan dla urlopu. Stosowane podczas całej fazy opuszczania. Dodawany natychmiast po uruchomieniu przejścia na urlop, usuwany po zakończeniu przejścia/animacji. Klasy tej można użyć do zdefiniowania czasu trwania, opóźnienia i krzywej dynamiki dla przejścia kończącego.
6. v-leave-to: Dostępne tylko w wersjach> = 2.1.8. Stan końcowy dla urlopu. Dodano jedną ramkę po wyzwoleniu przejścia (w tym samym czasie 7. v-leave został usunięty), usunięty po zakończeniu przejścia/animacji.

---

Można także użyć CSS animations gdzie można dostarczać w różnych fazach transformacji, co będzie aĹ css aby dokonać przejścia bardziej gładka, jak śledzenie i demo fiddle:

.fade-enter-active { 
    animation: bounce-in .5s; 
} 
.fade-leave-active { 
    animation: bounce-out .5s; 
} 
@keyframes bounce-in { 
    0% { 
    height: 5px; 
    } 
    30% { 
    height: 30px; 
    } 
    50% { 
    height: 50px; 
    } 
    100% { 
    height: 100px; 
    } 
} 
@keyframes bounce-out { 
    0% { 
    height: 90px; 
    } 
    50% { 
    height: 50px; 
    } 
    100% { 
    height: 0px; 
    } 
} 

Answer 3

Zamiast tego możesz użyć animacji slideDown/slideUp. Aby to osiągnąć, nie musisz znać wysokości elementu ślizgowego, zasady transformacji max-height wyjaśnił there.

W rezultacie spowoduje to animowane przesuwanie elementów poniżej celu.

Sprawdź mój example na podstawie Twojego skrzypce.