Overgangseiendom - CSS-triks

Anonim

Den transition-propertyeiendom, vanligvis brukt som en del av transitionstenografi, brukes til å definere hva eiendommen, eller egenskaper, ønsker du å bruke en overgangseffekt til.

Dette gjøres ved å oppgi navnet på eiendommen som verdien:

.example ( transition-property: color; )

Verdien kan være en av følgende:

  • Et enkelt eiendomsnavn, som i eksemplet ovenfor
  • En kommaseparert liste over eiendomsnavn (stenografi eller langhånd) for overgang av flere egenskaper på et enkelt element
  • Nøkkelordet none, som indikerer at ingen eiendom vil overgå
  • Nøkkelordet all, som indikerer at alle eiendommer vil overgå (standard)

Da komma separering av verdiene, blir alle egenskapsnavn vesentlige tilordnes til andre overgangsegenskaper definert ( transition-timing-function, transition-duration, og transition-delay). Så dette betyr at hvis en komma-separert liste over egenskaper inneholder ett eller flere eiendomsnavn som er ugyldige, vil de andre egenskapene fremdeles overgå, og vil tilordnes til de tiltenkte relaterte overgangsegenskapene.

Spesifikasjonen beskriver dette ved å si:

“(U) ikke-kjente eller ikke-animerbare egenskaper må oppbevares i listen for å bevare samsvaret med indeksene.”

Når du bruker en verdi av noneeller universelle nøkkelord inheriteller initial, kan ikke disse verdiene brukes som en del av en kommaseparert liste, ellers vil dette resultere i en syntaksfeil og hele linjen vil bli ignorert.

For kompatibilitet i alle støttende nettlesere kreves leverandørprefikser, med standardsyntaks deklarert sist:

.example ( -webkit-transition-property: color; -moz-transition-property: color; -o-transition-property: color; transition-property: color; )

IE10 (den første stabile versjonen av IE som støtter transition-property) krever ikke -ms-prefikset.

Nettleserstøtte

Chrome Safari Firefox Opera DVS Android iOS
Virker Virker 4+ 10.5+ 10+ 2.1+ 3.2+