La propiedad Style TransitionProperty en HTML DOM se usa para establecer el nombre de la propiedad CSS para el efecto de transición. Puede ocurrir cuando un usuario se desplaza sobre un elemento. Devuelve la propiedad TransitionProperty de un elemento.
Sintaxis:
- Devuelve la propiedad TransitionProperty.
object.style.transitionProperty
- Se utiliza para establecer la propiedad TransitionProperty.
object.style.transitionProperty = "none | all | property | initial | inherit"
Valores de propiedad:
- ninguno: el efecto de transición no se aplicará a ningún elemento.
- all: Todos los elementos obtendrán un efecto de transición. Es un valor predeterminado.
- propiedad: se utiliza para especificar valores separados por comas para los nombres de propiedad CSS para el efecto de transición.
- initial: establece la propiedad TransitionProperty en su valor predeterminado.
- heredar: esta propiedad se hereda de su elemento padre.
Valor devuelto: Devuelve una string que representa la propiedad TransitionProperty de un elemento.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Style transitionProperty Property </title>
<style>
#gfg {
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;
}
#gfg:hover {
background-color: green;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Style transitionProperty Property </h2>
<div id="gfg" style="color:white">
A Computer science portal for geeks
</div>
<button type="button" onclick="geeks()">
Click
</button>
<script>
function geeks() {
document.getElementById(
"gfg").style.transitionProperty = "all";
// for safari 3.1 to 6.0
document.getElementById(
"gfg").style.WebkitTransitionProperty = "all";
}
</script>
</center>
</body>
</html>
Producción:
- Antes de pasar el mouse:
- Después de pasar el mouse:
Ejemplo-2:
html
<!DOCTYPE html>
<html>
<head>
<title>DOM Style transitionProperty Property </title>
<style>
#gfg {
border: 3px solid blue;
background-color: green;
width: 100px;
height: 50px;
-webkit-transition: all 2s;
<!-- for safari -->
transition: all 2s;
}
#gfg:hover {
background-color: green;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>DOM Style transitionProperty Property </h2>
<div id="gfg" style="color:white">
A Computer science portal for geeks
</div>
<button type="button" onclick="geeks()">
Click
</button>
<script>
function geeks() {
document.getElementById(
"gfg").style.transitionProperty =
"width, height";
document.getElementById(
"gfg").style.WebkitTransitionProperty =
"width, height";
}
</script>
</center>
</body>
</html>
Producción:
- Antes de pasar el mouse:
- Después de pasar el mouse:
Navegadores compatibles: los navegadores compatibles con la propiedad DOM Style TransitionProperty se enumeran a continuación:
- Google Chrome 26.0 y superior
- Borde 12.0 y superior
- Internet Explorer 10.0 y superior
- Firefox 16.0 y superior
- Ópera 12.1 y superior
- Apple Safari 9 y superior
Publicación traducida automáticamente
Artículo escrito por bestharadhakrishna y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA