DAFTAR LABEL POPULER PENELITIAN.ID
DAFTAR LABEL POPULER PENELITIAN.ID
Jangan Buka Artikel Ini!
DAFTAR ARSIP POSTING PENELITIAN.ID
DAFTAR ARSIP POSTING PENELITIAN.ID
Mengatur Efek Transisi HTML Menggunakan transitionProperty Style DOM
- Dapatkan link
- Aplikasi Lainnya
Sintak:
- mengembalikan nilai transitionProperty: object.style.transitionProperty
- pengaturan nilai properti transitionProperty: object.style.transitionProperty = "none | all | property | initial | inherit"
Property Values:
- none: Efek transisi tidak akan diterapkan pada elemen apapun.
- all: segala elemen akan mendapatkan nilai efek transisi, dan merupakan nilai default dari properti.
- property: digunakan untuk menentukan sebuah koma yang memisahkan nilai untuk nama properti CSS untuk efek transisi.
- initial: mengatur nilai properti transitionProperty ke nilai default-nya.
- inherit: menerima nilai turunan properti dari elemen parent.
Return Values: mengembalikan sebuah string yang merepresentasikan transitionProperty dari suatu elemen.
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style
transitionProperty DOM
</title>
<style>
#bnn1
{
border: 3px solid blue;
background-color: green;
width: 100px;
height: 50px;
-webkit-transition: all 2s;
<!-- for safari 3.1 to 6.0-->
transition: all 2s;
}
#bnn1:hover
{
background-color: green;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<center>
<h1
style="color:green;">
Blog Elfan
</h1>
<h2>
Properti Style
transitionProperty DOM
</h2>
<div
id="bnn1"
style="color:white">
Merupakan portal ilmu
komputer.
</div>
<button
type="button"
onclick="Bon1s()">
Click
</button>
<script>
function Bon1s()
{
document.getElementById(
"bnn1").style.transitionProperty = "all";
// untuk safari 3.1 to 6.0
document.getElementById(
"bnn1").style.WebkitTransitionProperty = "all";
}
</script>
</center>
</body>
</html>
Blog Elfan
Properti Style transitionProperty DOM
Contoh:
<!DOCTYPE html>
<html>
<head>
<title>
Properti Style
transitionProperty DOM
</title>
<style>
#bkk
{
border: 3px solid blue;
background-color: green;
width: 100px;
height: 50px;
-webkit-transition: all 2s;
<!-- for safari -->
transition: all 2s;
}
#bkk:hover
{
background-color: green;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<center>
<h1
style="color:green;">
Blog Elfan
</h1>
<h2>
Properti Style
transitionProperty DOM
</h2>
<div
id="bkk"
style="color:white">
Merupakan portal ilmu
komputer.
</div>
<button
type="button"
onclick="Don2s()">
Click
</button>
<script>
function Don2s()
{
document.getElementById(
"bkk").style.transitionProperty =
"width, height";
document.getElementById(
"bkk").style.WebkitTransitionProperty =
"width, height";
}
</script>
</center>
</body>
</html>
Blog Elfan
Properti Style transitionProperty DOM
- 4 Value Properti userSelect Style DOM pada HTML [klik]
- 12 Value Property verticalAlign Style DOM pada HTML [klik]
- 5 Value Properti Visibility Style DOM pada HTML [klik]
- 5 Value Properti Width Style DOM pada HTML [klik]
- 5 Value Properti wordBreak Style DOM pada HTML [klik]
- 4 Value Properti wordSpacing Style DOM pada HTML [klik]
- 4 Value Properti wordWrap Style DOM pada HTML [klik]
- Dapatkan link
- Aplikasi Lainnya
Komentar
Posting Komentar
Hubungi admin melalui Wa : +62-896-2514-6106
Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.
Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.
~ Ikatlah Ilmu dengan Memostingkannya ~
Jenis browser-browser apa saja yang dapat digunakan untuk mengaktifkan properti Style transitionProperty DOM pada HTML?
BalasHapusBerikut ini diperlihatkan beberapa contoh browser yang dapat digunakan untuk mengaktifkan properti transitionProperty DOM pada HTML:
Hapus- Google Chrome 26.0
- Internet Explorer 10.0
- Firefox 16.0
- Opera 12.1
- Apple Safari 6.1
Apa yang dimaksud dengan transitionProperty Style DOM pada HTML?
BalasHapustransitionProperty Style DOM pada HTML merupakan properti singkatan dari empat jenis properti lain seperti transitionProperty, transitionDuration, transitionTimingFunction, dan transitionDelay.
HapusUntuk melakukan transisi properti, terlebih dahulu tentukan nilai properti transitionDuration, jika tidak, maka nilai durasinya adalah 0 dan propses transisi tidak akan berpengaruh apapun pada animasi.
Hapus