在代码中添加以下CSS样式,可以使元素在显示和隐藏时呈现渐变效果:
/* 设置渐变延时时间 */ transition: opacity 1s ease-in-out;
/* 停止渐变动画 */ transition: none;
/* 渐变效果淡入 / .fade-in { opacity: 0; / 设置初始透明度为 0 */ }
.fade-in.active { opacity: 1; /* 激活时渐变到完全的不透明 */ }
/* 渐变效果淡出 */ .fade-out { opacity: 1; }
.fade-out.active { opacity: 0; /* 激活时渐变到完全透明 */ }
如需使用JavaScript控制元素的渐变效果,可以使用以下代码:
/* 淡入效果 */ element.classList.add('fade-in', 'active');
/* 淡出效果 */ element.classList.add('fade-out', 'active');