AMcoder - javascript, python, java, html, php, sql

font-wesome անիմացիան չի աշխատում ցուցադրման հետ. ոչ մեկը;

Եթե ​​ես թաքցնեմ տարրը display: none;-ով, իսկ հետո ցուցադրեմ այն ​​$(".fa-spin").show()-ով, ապա fa-spin անիմացիան չի աշխատում:

Նկատի ունեցեք, որ ամեն ինչ ճիշտ է աշխատում, եթե տարրը սկզբում թաքնված չէ, բայց հետագայում թաքնված է հետևյալով.

$(".fa-spin").hide()

Սա .fa-spin իրականացումն է.

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}

@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

Կարո՞ղ եք բացատրել այս պահվածքը:

Ես հարցնում եմ այս պահվածքի պատճառը, այլ ոչ թե լուծումներ:

https://jsfiddle.net/md0ej7pt/


  • Կարո՞ղ եք բացատրել, թե ինչու եք ուզում, որ անտեսանելի տարրը շարժվի: 15.08.2016
  • Դա բեռնիչ է, այն սկսում է թաքնված, և այն պետք է ցուցադրվի հետո: 15.08.2016
  • Սահմանեք visibility: hidden կամ opacity: 0՝ display: none-ի փոխարեն, եթե ցանկանում եք անիմացիոն տարր: 15.08.2016
  • Պատճառն եմ հարցնում, ոչ թե լուծումներ։ Ես գիտեմ, թե ինչպես աշխատել դրա շուրջ: 15.08.2016
  • CSS փոխակերպումը չի աշխատում ներկառուցված տարրերի վրա-ի հնարավոր կրկնօրինակը 15.08.2016

Պատասխանները:


1

jQuery.show() display հատկությունը սահմանում է inline, երբ կանչվում է i տարրը: Համաձայն WC3 փաստաթղթերի inline տարրերը չեն կարող անիմացիոն լինել.

https://drafts.csswg.org/css-transforms-1/

Փոխակերպվող տարր

Փոխակերպվող տարրը այս կատեգորիաներից մեկի տարրն է. տարր, որի դասավորությունը կառավարվում է CSS տուփի մոդելով, որը կա՛մ բլոկի մակարդակի, կա՛մ ատոմային ներգծային մակարդակի տարր է, կամ որի ցուցադրման հատկությունը հաշվարկվում է աղյուսակի տողով, table-row-group, table-header-group, table-footer-group, table-cell կամ table-caption [CSS21]

Սա շտկելու համար օգտագործեք Vallius-ի առաջարկը՝ կարգավորել ցուցադրումը. inline-block՝ show()-ի փոխարեն, կամ փաթաթել տարրը և փոխարենը թաքցնել ծնողը:

https://jsfiddle.net/359zLsdf/2/

<span class="coggy" style="display:none" ><i class="fa fa-cog fa-spin"  aria-hidden="true"></i></span>

<i class="fa fa-cog fa-spin myCog " style="display:none"  aria-hidden="true"></i>

$(".coggy").show();

$(".myCog").css("display","inline-block");
15.08.2016
  • Ձեր պատասխանի երկրորդ մասը ճիշտ պատասխանն է: Ի՞նչ կասեք առաջին մասը հեռացնելու և այն ավելի ընթեռնելի դարձնելու մասին: 15.08.2016

  • 2

    Ուղղակի վարքագծի բացատրություն եք ուզում:

    developer.mozilla.org-ից՝

    Ի լրումն ցուցադրման տուփի բազմաթիվ տարբեր տեսակների, «none» արժեքը թույլ է տալիս անջատել տարրի ցուցադրումը. երբ դուք օգտագործում եք ոչ մեկը, բոլոր հետնորդ տարրերի ցուցադրումն անջատված է: Փաստաթուղթը ներկայացվում է այնպես, կարծես տարրը գոյություն չունի փաստաթղթի ծառում:

    Տեսանելիության հատկության համեմատ.

    Տեսանելիության հատկությունը կարող է օգտագործվել տարրը թաքցնելու համար՝ թողնելով այն տարածքը, որտեղ այն կլիներ: Այն կարող է նաև թաքցնել աղյուսակի տողերը կամ սյունակները:

    15.08.2016
  • Սա չի պատասխանում իմ հարցին: Ինչու՞ տարրը չի պտտվում, երբ այն ցուցադրվում է: 15.08.2016
  • Աաաաաաա, կներես Ես չհասկացա ձեր հարցը։ Կարծես թե դու արդեն պատասխան ունես: 15.08.2016

  • 3

    Փորձեք այս:

    $(".fa-cog").css("display","inline-block");
    
    15.08.2016

    4

    Ես գտա նմանատիպ հարց այստեղ.

    CSS անցում ի սկզբանե թաքնված տարրի վրա

    Թվում է, թե կան լուծումներ. սիրում եմ սկսել z-index: -1-ով display:none-ի փոխարեն, կամ սկսել թափանցիկ տարրով:

    15.08.2016
    Նոր նյութեր

    Օգտագործելով Fetch Vs Axios.Js-ը՝ HTTP հարցումներ կատարելու համար
    JavaScript-ը կարող է ցանցային հարցումներ ուղարկել սերվեր և բեռնել նոր տեղեկատվություն, երբ դա անհրաժեշտ լինի: Օրինակ, մենք կարող ենք օգտագործել ցանցային հարցումը պատվեր ներկայացնելու,..

    Տիրապետել հանգստության արվեստին. մշակողի ուղեցույց՝ ճնշման տակ ծաղկելու համար
    Տիրապետել հանգստության արվեստին. մշակողի ուղեցույց՝ ճնշման տակ ծաղկելու համար Ինչպե՞ս հանգստացնել ձեր միտքը և աշխատեցնել ձեր պրոցեսորը: Ինչպես մնալ հանգիստ և զարգանալ ճնշման տակ...

    Մեքենայի ուսուցում բանկային և ֆինանսների ոլորտում
    Բարդ, խելացի անվտանգության համակարգերը և հաճախորդների սպասարկման պարզեցված ծառայությունները բիզնեսի հաջողության բանալին են: Ֆինանսական հաստատությունները, մասնավորապես, պետք է առաջ մնան կորի..

    Ես AI-ին հարցրի կյանքի իմաստը, այն ինչ ասում էր, ցնցող էր:
    Այն պահից ի վեր, երբ ես իմացա Արհեստական ​​ինտելեկտի մասին, ես հիացած էի այն բանով, թե ինչպես է այն կարողանում հասկանալ մարդկային նորմալ տեքստը, և այն կարող է առաջացնել իր սեփական արձագանքը դրա..

    Ինչպես սովորել կոդավորումը Python-ում վագրի պես:
    Սովորելու համար ծրագրավորման նոր լեզու ընտրելը բարդ է: Անկախ նրանից, թե դուք սկսնակ եք, թե առաջադեմ, դա օգնում է իմանալ, թե ինչ թեմաներ պետք է սովորել: Ծրագրավորման լեզվի հիմունքները, դրա..

    C++-ի օրական բիթ(ե) | Ամենաերկար պալինդրոմային ենթաշարը
    C++ #198-ի ամենօրյա բիթ(ե), Ընդհանուր հարցազրույցի խնդիր. Ամենաերկար պալինդրոմային ենթատող: Այսօր մենք կանդրադառնանք հարցազրույցի ընդհանուր խնդրին. Ամենաերկար palindromic substring...

    Kydavra ICAReducer՝ ձեր տվյալների ծավալայինությունը նվազեցնելու համար
    Ի՞նչ է ICAReducer-ը: ICAReducer-ն աշխատում է հետևյալ կերպ. այն նվազեցնում է նրանց միջև բարձր փոխկապակցված հատկանիշները մինչև մեկ սյունակ: Բավականին նման է PCAreducer-ին, չնայած այն..