Mengatur Efek Transisi HTML Menggunakan transitionProperty Style DOM
 |
| transitionProperty Style DOM |
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.
<!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]
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