ປະເພດວິທີການຜ່ານສະແດງ CSS

ການກໍານົດແລະການໃຊ້

ການປັບສະໜອງ transition ແມ່ນການປັບສະໜອງຄວາມສະເພາະທີ່ນຳໃຊ້ສິບສີບການກະຈາຍຄວາມປະສົງຄວາມທີ່ຕ້ອງກະຈາຍ.

ຄວາມຄິດ:ການກໍານົດສະໜອງ. transition-duration ກຳນົດຕະຫຼອດເວລາ.

ບໍ່ດັ່ງນັ້ນ, ການປະສົບການຈະບໍ່ເກີດຂຶ້ນຖ້າເວລາບໍ່ໄດ້ກວດກາ, ຈະບໍ່ມີຜົນການກະຈາຍ.

ການສອນ CSS:ຜ່ານສະແດງ CSS

ປືກສາ HTML DOM:ການສະແດງ transition

ຄວາມຈິງ

ຍົກຍ້າຍຄຳນວນຂອງຫົວໜ້າ div ທີ່ຢູ່ພາຍໃນສະຖານນີ, ຄວາມກວດກາຈະຈະກະຈາຍຈາກ 100px ໄປເຖິງ 300px:

div {
  width: 100px;
  transition: width 2s;
}

ສອບສວນເອງ

ຄຳສັບ CSS

transition: property duration timing-function delay;

ຄວາມມີຄວາມຄິດທີ່ມີຄວາມຈິງ

ຄວາມມີຄວາມຄິດ ການອະທິບາຍ
transition-property ການກໍານົດຊື່ຂອງການປັບສະໜອງ CSS ທີ່ຕ້ອງກະຈາຍ.
transition-duration ການກໍານົດຄວາມເວລາທີ່ຈຳນວນພາສີຫຼືມາດຕະຖານ.
transition-timing-function ການກໍານົດຄວາມໄວທີ່ການຈຳນວນບາງຄັ້ງຂອງຜົນການກະຈາຍ.
transition-delay ການກໍານົດການເລີ່ມຕົ້ນຂອງຜົນການບັນທຶກການກະຈາຍ.

ຂໍ້ມູນດ້ານເຕັກນິກ

ຄວາມປົກກະຕິ: all 0 ease 0
ການຮັບຢືນ: no
ຮູບແບບ: CSS3
ຄຳສັບ JavaScript: object.style.transition="width 2s"

ການສະໜັບສະໜູນບັນດາສະຖານນິທິ

ຈຳນວນທີ່ມີໃນຕາຕະລາງສະແດງວ່າສະຖານນິທິທຳອິດທີ່ສະຫຼາດສະໜັບສະໜູນຄວາມມີຄວາມຈິງຂອງຄວາມປະສົງຄວາມ.

ຈຳນວນທີ່ມີ -webkit-、-moz- ຫຼື -o- ແມ່ນສະຖິຕິຂອງຮູບແບບທຳອິດທີ່ນຳໃຊ້ກໍາແພງ.

Chrome IE / Edge Firefox Safari Opera
26.0
4.0 -webkit-		 10.0 16.0
4.0 -moz-		 6.1
3.1 -webkit-		 12.1
10.5 -o-