HTML DOM Style transitionTimingFunction 属性返回和修改表示元素过渡效果的速度曲线的函数。
用法
以下是语法 -
1. 返回 transitionTimingFunction
object.transitionTimingFunction
2.修改transitionTimingFunction
object.transitionTimingFunction = “ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier() | initial | inherit”
让我们看一个 HTML DOM 样式 transitionTimingFunction 属性的例子 -
示例
<!DOCTYPE html>
<html>
<style>
body {
color:#000;
height:100vh;
}
.btn {
background:#db133a;
border:none;
height:2rem;
border-radius:2px;
width:40%;
display:block;
color:#fff;
outline:none;
cursor:pointer;
margin:1rem 0;
}
.circle {
height:100px;
width:100px;
background-color:#db133a;
}
.circle:hover {
height:200px;
width:200px;
border-radius:50%;
transition:all 2s;
}
.show {
font-size:1.2rem;
margin:1rem 0;
}
</style>
<body>
<h1>DOM Style transitionTimingFunction Property Demo</h1>
<div class='circle'></div>
<button onclick="set()" class="btn">Set transitionTimingFunction</button>
<div class="show">Now, hover on the square</div>
<script>
function set() {
document.querySelector('.circle').style.transitionTimingFunction = "ease-in-out";
}
</script>
</body>
</html>
输出
点击 ”Set transitionTimingFunction”按钮,然后将鼠标悬停在 “red” 方块上即可查看 transitionTimingFunction 效果。
相关用法
- HTML DOM Style transition属性用法及代码示例
- HTML DOM Style transitionDelay属性用法及代码示例
- HTML DOM Style transitionDuration属性用法及代码示例
- HTML DOM Style transitionProperty属性用法及代码示例
- HTML DOM Style transform属性用法及代码示例
- HTML DOM Style transformStyle属性用法及代码示例
- HTML DOM Style transformOrigin属性用法及代码示例
- HTML DOM Style textAlignLast属性用法及代码示例
- HTML DOM Style textDecoration属性用法及代码示例
- HTML DOM Style textDecorationColor属性用法及代码示例
- HTML DOM Style textDecorationLine属性用法及代码示例
- HTML DOM Style textAlign属性用法及代码示例
- HTML DOM Style top属性用法及代码示例
- HTML DOM Style textDecorationStyle属性用法及代码示例
- HTML DOM Style textOverflow属性用法及代码示例
- HTML DOM Style textIndent属性用法及代码示例
- HTML DOM Style textShadow属性用法及代码示例
- HTML DOM Style textTransform属性用法及代码示例
- HTML DOM Style tableLayout属性用法及代码示例
- HTML DOM Style tabSize属性用法及代码示例
注:本文由纯净天空筛选整理自AmitDiwan大神的英文原创作品 HTML DOM Style transitionTimingFunction Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。