javascript - 淡入淡出元素的过渡不起作用
问题描述
我的代码有问题,可能有人知道解决方案。
我创建了一些卡片,我希望当我点击其中一张时,上方会出现一张更大的新卡片。我用 for 循环很容易做到了,但问题是过渡,我想设置一个平滑的过渡。
较大卡片的初始状态是display: none;
,opacity: 0;
我知道我们不能淡出显示无元素,但我的想法是先设置 a display: block
,然后opacity: 1
在“卡片打开”元素的 css 中设置一个过渡属性。
但是过渡不起作用,这让我发疯,因为我不知道为什么
我在这里分享 codepen 链接:https ://codepen.io/arnaudhrt/pen/VwWBLze
和javascript代码:
const Card = document.querySelectorAll('.card')
const CardOpen = document.querySelectorAll('.card-open')
const btnClose = document.querySelectorAll('.close')
for(let i = 0 ; i < Card.length ; i++) {
Card[i].addEventListener('click', function() {
CardOpen[i].style.display = 'block'
CardOpen[i].style.opacity = '1'
});
btnClose[i].addEventListener('click', () => {
CardOpen[i].style.opacity = '0'
CardOpen[i].style.display = 'none'
})
}
PS:我不能设置显示块,只是切换不透明度,因为如果我这样做,我不能使用其他带有 z-index 的卡。
解决方案
您可以使用可见性代替显示,显示在 css 中没有过渡效果。
const Card = document.querySelectorAll('.card')
const CardOpen = document.querySelectorAll('.card-open')
const btnClose = document.querySelectorAll('.close')
for(let i = 0 ; i < Card.length ; i++) {
Card[i].addEventListener('click', function() {
CardOpen[i].style.visibility = 'visible'
CardOpen[i].style.opacity = '1'
});
btnClose[i].addEventListener('click', () => {
CardOpen[i].style.opacity = '0'
CardOpen[i].style.visibility = 'hidden'
})
}
body {
background: #565279;
width: 100vw;
height: 100vh;
display: flex;
}
.container-card {
max-width: 1200px;
margin: auto;
display: flex;
flex-wrap: wrap;
align-content: center;
position: relative;
transition: all 0.4s ease-in-out;
}
.card {
width: 200px;
height: 200px;
background: crimson;
margin: 20px;
cursor: pointer;
transition: all 0.4s ease-in-out;
}
.card-open {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: #333;
visibility: hidden;
opacity: 0;
transition: all 0.4s ease-in-out;
}
.card-open span {
color: #fff;
position: absolute;
bottom: 30px;
left: 50%;
transform:translateX(-50%);
cursor: pointer;
}
<div class="container-card">
<div class="card card1"></div>
<div class="card card2"></div>
<div class="card card3"></div>
<div class="card card4"></div>
<div class="card card5"></div>
<div class="card card6"></div>
<div class="card card7"></div>
<div class="card card8"></div>
<div class="card card9"></div>
<div class="card card10"></div>
<div class="card-open open1"><span class="close">close</span></div>
<div class="card-open open2"><span class="close">close</span></div>
<div class="card-open open3"><span class="close">close</span></div>
<div class="card-open open4"><span class="close">close</span></div>
<div class="card-open open5"><span class="close">close</span></div>
<div class="card-open open6"><span class="close">close</span></div>
<div class="card-open open7"><span class="close">close</span></div>
<div class="card-open open8"><span class="close">close</span></div>
<div class="card-open open9"><span class="close">close</span></div>
<div class="card-open open10"><span class="close">close</span></div>
</div>
推荐阅读
- go - 如何从gorm中的模型中获取表名?
- javascript - Javascript / ES6 从对象数组中解析值
- mongodb - $lookup 使用猫鼬
- java - 为什么在junit测试期间多次初始化bean?
- crystal-lang - 呼叫阻止呼叫不起作用
- hadoop - 如何使用 BDM(Informatica)将文件从本地文件系统复制到 hdfs 文件系统?
- java - JOLT:将逗号分隔值转换为对象
- c# - 在 Windows 服务器中使用正确的设置和配置设置 Elasticsearch 以供生产使用
- javascript - 使用 if、else if 和 else 时出现意外的标记 else
- javascript - 如何在Angular中使用*ngFor动态调用所有图像并显示?