WebHU - Programozási kérdések és válaszok

A jQuery/CSS fade-in és fade out effektust ad hozzá

Készítettem 3 css osztályt, amelyek így néznek ki:

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba( 255, 255, 255, .8 ) url('') 50% 50% no-repeat;
    background-image: url('../../images/gears.svg');
}

body.loading {
    overflow: hidden;
}

    body.loading .modal {
        display: block;
    }

A jQuery esemény onclick esetén megjelenítem a végfelhasználónak, hogy a felhasználó tudja, hogy valami történik.

Amit itt nem szeretek, az az, hogy a betöltés nagyon erőltetetten jelenik meg, nincs zökkenőmentes átmenet, amikor megjelenik és amikor eltűnik. Amit teszek, hogy megmutassam a rakodó fogaskerekeket a felhasználónak:

$body = $("body");

És akkor a megjelenítéshez:

$body.addClass("loading");

Vagy az eltávolításhoz:

$body.removeClass("loading");

Hogyan adhatok hozzá zökkenőmentes átmenetet a betöltő fogaskerekek megjelenésére és eltűnésére jquery vagy CSS használatával, hogy az animáció barátságosabbnak tűnjön?

Tud valaki segíteni nekem?

javascript html jquery css
19.02.2017

  • P.S. Ha van saját ötletetek, hogyan tudnám szebbé varázsolni, kérem írja meg véleményét/megoldásait, szívesen megnézem és elolvasom =) 19.02.2017

Válaszok:


1

Eltávolítanám a display: none fájlt, majd csak egy css átmenetet használnék az elhalványításhoz a tárolóban. A törzs helyett egyszerűen hozzáadhatja az osztályt a modálishoz.

.loader {
  visibility: hidden;
  opacity: 0;
}

.loader.visible {
   opacity: 1;
   visibility: visible;
   transition: opacity .25s ease-in-out;
   -moz-transition: opacity .25s ease-in-out;
   -webkit-transition: opacity .25s ease-in-out;
}
19.02.2017

2

A opacity vagy visibility CSS-átmenetek használata mellett a jQuery segítségével is megjelenítheti/elrejtheti a betöltőt. Én a Zach CSS-megoldását ajánlom, mivel egyszerűbb és hatékonyabb, de ez egy alternatíva.

 .modal {
  display: none;
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba( 255, 255, 255, .8 ) url('') 50% 50% no-repeat;
  background-image: url('../../images/gears.svg');
}
body.loading {
  overflow: hidden;
}

$('body').addClass('loading');

/* fade loader in */
$('.modal').fadeIn('fast');

/* fade loader out */
$('.modal').fadeOut('fast', function() {
  $('body').removeClass('loading');
});
19.02.2017
Új anyagok
A rádiógomb ellenőrzött eseményének használata a jQueryben
Ebben a cikkben látni fogjuk, hogyan kell dolgozni a jquery választógombbal ellenőrzött eseményeivel. A választógombok HTML gombok, amelyek segítenek kiválasztani egyetlen értéket egy csoportból...
Körkörös függőségek megoldása terraformban adatforrásokkal – lépésről lépésre
Mi az a körkörös függőségek Dolgozzunk egy egyszerű eseten, amikor az SQS-sor és az S3-vödör közötti körkörös függőség problémája van egy egymástól függő címkeérték miatt. provider..
Miért érdemes elkezdeni a kódolást 2023-ban?
01100011 01101111 01100100 01100101 — beep boop beep boop Világunk folyamatosan fejlődik a technológia körül, és naponta fejlesztenek új technológiákat a valós problémák megoldására. Amint..
🎙 Random Noise #2  – Örökbefogadás és hit
az analitika íratlan világának gondozása Szeretné, hogy ezek a frissítések a postaládájába kerüljenek? Iratkozzon fel itt . "Ha önvezető autókat gyártanak, akkor mi miért ne..
A legrosszabb politika és prediktív modellek májátültetésre jelöltek számára az Egyesült Államokban
A máj (vagy óangolul lifer) az emberi test legnehezebb belső szervére utal, amely csendesen működik a nap 24 órájában. Mit csinál a máj? 500 feladatot hajt végre a szervezet egészségének..
5 webhely, amely 2022-ben fejleszti front-end fejlesztői készségeit
Frontendmentor.io A tényleges projektek létrehozásával a Frontendmentor.io segítséget nyújt a front-end kódolási képességeinek fejlesztésében. A kódolást azután kezdheti meg, hogy..
Mikor kell használni a Type-t az interfészhez képest a TypeScriptben?
A TypeScript a JavaScript gépelt szuperkészlete, amely statikus gépelést ad a nyelvhez. Ez megkönnyíti a robusztus és karbantartható kód írását azáltal, hogy a hibákat a fordítási időben..