Kuidas rakendada pesas siirdeid väärtuses Vue

Elemendi animeerimine selle kuvamisel või peitmisel on Vue-s üsna lihtne - peate lihtsalt elemendi komponendiga ümber mähima.

Mis saab nendest juhtudest, kui soovite pesastatud lapsi järjestikku näidata või peita? Näiteks pärast juurelemendi kuvamist näidake elementi A ja pärast seda näidake elementi B jne.

Seda on Vue's endiselt lihtne teha; järgmise käivitamiseks on vaja lihtsalt viisi, kuidas teada saada, millal eelmine üleminek on tehtud.

Kui te pole seda varem teinud ja te mõtlete, kuidas, siis säästan teid natuke aega ja näitan teile, kuidas seda teha puhtal, kontrollitaval viisil. Kuid enne seda vaadake seda CodePeni, et näha, mida me kavatseme ehitada:

Nagu ülaltoodud demos näete, loome lihtsa modaalikasti, mida kuvatakse kahes etapis (üleminekud). Esiteks näitame ülekatte tausta ja seejärel kuvame valge sisu kasti.

Ma jagan õppematerjali kolmeks osaks. Esiteks loome nupu ja modaalse kasti. Kasutaja saab modaalkasti näidata, klõpsates nuppu ja sulgeda, klõpsates ülekatte taustal. Selles jaotises avaneb režiim ilma animatsioonideta.

Teises jaotises lisame üheastmelise ülemineku - nii kuvatakse ülekatte taust ja sisukast samaaegselt.

Ja viimasesse jaotisse lisame sisukasti pesastatud ülemineku - see kuvatakse pärast ülekattega taustal ülemineku lõppu.

Modaalse kasti näitamine ilma animatsioonita

Alustame asju kiiresti Vue CLI 3 kiire prototüübiga. Nii looge App.vue ja pange sektsiooni

Meil on siin nupp, mis seab showModal'i tõeseks. Ja kui see on tõsi, kuvame komponendi , nagu ülal näidatud. (Pange tähele, et me pole seda komponenti veel loonud, kuid loome varsti.)

Samuti pange tähele, kuidas seadsime showModali valeks, kui kiirgab kohandatud sündmust.

Pange jaotisesse

Ja siis sellest

Järgmisena loome komponendi Modal.vue ja lisage mallide sektsiooni järgmine teave:


  
    
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, platsatt, unde! Architecto laboriosam ducimus atque cum dolore doloribus obcaecati vero. Miinus porro sapiente unde fuga incidunt quidem nepieciešamusbus mollitia libero?     
  

Pange tähele, et siin asuvat juurelementi (.modal) kasutatakse ülekatte taustana. Kui kasutaja sellel klõpsab, väljastab see lähisündmuse.

Samuti pange tähele, kuidas me kasutame @ click.stop on .content, et vältida selle sulgemist moodulil, kui sellel klõpsatakse.

Jaotis

Järgmisena lisage see stiilimiseks:


.modaalne {
  positsioon: absoluutne;
  ülemine: 0;
  vasakul: 0;
  laius: 100vw;
  kõrgus: 100vh;
  taust: rgba (0,0,0,0,6)
}
.sisu {
  positsioon: absoluutne;
  ülaosa: 50%;
  vasakult: 50%;
  laius: arvutatud (100% - 20 pikslit);
  max laius: 500 pikslit;
  teisendada: tõlkida (-50%, -50%);
  taust: #FFF;
  ääreraadius: 3xx;
  polster: 20 px;
  joone kõrgus: 1,5;
  kirjasuurus: 18 pikslit;
  värv: # 444;
  box-shadow: 0 3px 6px rgba (0,0,0,0,16), 0 3px 6px rgba (0,0,0,0,23);
}

Sel hetkel peaksite saama modaaliboksi avada / sulgeda, kuid ilma animatsioonita.

Üheastmeline üleminek

Tehkem nüüd mooduli kast lahti üheastmelise üleminekuga.

Seda on nii lihtne teha. Mähkige mooduskomponendi sisu sisse <ülemineku nimi = "fade"> , näiteks nii:


  <ülemineku nimi = "fade">
    
      
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam, platsatt, unde! Architecto laboriosam ducimus atque cum dolore doloribus obcaecati vero. Miinus porro sapiente unde fuga incidunt quidem nepieciešamusbus mollitia libero?       
    
  

Seejärel määratlege jaotises