<!DOCTYPE html>
<html>
<head>
<title>渐入渐出效果</title>
</head>
<body>
<div id="element">这是一个元素</div>
<button id="fade-in-button">渐入</button>
<button id="fade-out-button">渐出</button>
<script>
// 获取元素
var element = document.getElementById('element');
var fadeInButton = document.getElementById('fade-in-button');
var fadeOutButton = document.getElementById('fade-out-button');
// 渐入效果
function fadeIn(element, duration) {
// 获取元素的当前透明度
var opacity = getComputedStyle(element).opacity;
// 创建一个新的动画
var animation = element.animate([
{ opacity: opacity },
{ opacity: 1 }
], {
duration: duration,
iterations: 1,
fill: 'forwards'
});
}
// 渐出效果
function fadeOut(element, duration) {
// 获取元素的当前透明度
var opacity = getComputedStyle(element).opacity;
// 创建一个新的动画
var animation = element.animate([
{ opacity: opacity },
{ opacity: 0 }
], {
duration: duration,
iterations: 1,
fill: 'forwards'
});
}
// 按钮点击事件
fadeInButton.addEventListener('click', function() {
fadeIn(element, 1000);
});
fadeOutButton.addEventListener('click', function() {
fadeOut(element, 1000);
});
</script>
</body>
</html>
扫一扫
1626
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
