我想在剧本上有一个渐变效果

Question

我编写了脚本代码。

我想在剧本上有一个渐变效果。

如何为该代码添加淡入淡出效果？

请帮忙。。！

※我用了一个翻译，因为我不会说英语。这就是为什么我的话可能不自然。请理解。

const toggleBtn = document.querySelector('.btn');
const activeOn = document.querySelector('#wrap');
toggleBtn.addEventListener('click', () => {
activeOn.classList.toggle('active');
});

a {
color: black;
text-decoration: none;
}
.btn {
display: inline-block;
font-size: 20px;
font-weight: 600;
}
#wrap {
position: relative;
display: none;
}
#wrap.active {
display: block;
}
.contents {
position: relative;
display: inline-block;
margin: 15px;
padding: 30px;
border: 1px solid #555;
}

<a class="btn" href="#none">Click</a>
<div id="wrap">
<div class="contents">
Active Contents!
</div>
</div>

Answer 1

实现渐变效果的最佳方法是使用CSS转换。

需要注意的一点是，如果切换display: block和display: none，CSS转换将不起作用，因此需要考虑使用visibility或opacity属性。

这是工作代码：

const toggleBtn = document.querySelector('.btn');
const activeOn = document.querySelector('#wrap');
toggleBtn.addEventListener('click', () => {
activeOn.classList.toggle('active');
});

a {
color: black;
text-decoration: none;
}
.btn {
display: inline-block;
font-size: 20px;
font-weight: 600;
}
#wrap {
position: relative;
opacity: 0;
transition: opacity 0.5s linear;
height: 0; /* add this if you want it to take no space */
}
#wrap.active {
opacity: 1;
}
.contents {
position: relative;
display: inline-block;
margin: 15px;
padding: 30px;
border: 1px solid #555;
}

<a class="btn" href="#none">Click</a>
<div id="wrap">
<div class="contents">
Active Contents!
</div>
</div>

Answer 2

您可以使用opacity而不是display来实现这一点，如下所示：

const toggleBtn = document.querySelector('.btn');
const activeOn = document.querySelector('#wrap');
toggleBtn.addEventListener('click', () => {
activeOn.classList.toggle('active');
});

a {
color: black;
text-decoration: none;
}
.btn {
display: inline-block;
font-size: 20px;
font-weight: 600;
}
#wrap {
position: relative;
opacity: 0;
transition: opacity 1s; 
}
#wrap.active { 
opacity: 1;
transition: opacity 1s;
}
.contents {
position: relative;
display: inline-block;
margin: 15px;
padding: 30px;
border: 1px solid #555;
}

<a class="btn" href="#none">Click</a>
<div id="wrap">
<div class="contents">
Active Contents!
</div>
</div>