用Javascript为点击时添加的元素制作动画

Question

我正在尝试制作一个联系人图标，当按下移动到一边时，显示联系人信息。我希望文本保持中心，并为联系信息淡入。到目前为止，我有这个:

<div class="contacts">
<div class="contactIcon">ICON<span class="contactInfo"> (+xx)xxxxxxx</span></div>
<div class="contactIcon">ICON<span class="contactInfo"> (+xx)xxxxxxx</span></div>
</div>

let contactIcon = document.querySelectorAll('.contactIcon');
for (let i = 0; i < contactIcon.length; i++) {
contactIcon[i].addEventListener('click', function () {
let contactInfo = contactIcon[i].querySelector('.contactInfo');
if (contactInfo.style.display == 'none') {
contactInfo.style.visibility = 'visible'
contactInfo.style.display = 'inline';
contactInfo.style.maxWidth ='100px';
}
else {
contactInfo.style.visibility = 'hidden';
contactInfo.style.display = 'none';
contactInfo.style.maxWidth = '0';
}
});

.contactIcon {
overflow: hidden;
}
.contactInfo {
visibility: hidden;
display: none;
opacity: 1;
max-width: 500px;
transition: visibility 0s, opacity 0.3s, max-width 0.6s linear;
}

代码在一定程度上起作用，图标移动以允许空间，但没有动画，我不知道为什么，我试过切换a '。隐藏类，但也不能让它工作。此外，它需要2次点击，使内容出现，我也很难理解这一点。

Answer 1

后一个问题很容易回答:contactInfo.style.display == 'none'只检测内联样式，所以你必须从css中删除display:none;并将其附加到htmlspan。至于动画，display: none破坏了这里的一切，选择opacity或width，使元素在视觉上消失。

<div class="contactIcon">ICON
<span class="contactInfo" style="opacity: 0"> (+xx)xxxxxxx</span>
</div>

.contactInfo {
opacity: 1;
max-width: 500px;
/*transition: visibility 0s, opacity 0.3s, max-width 0.6s linear;*/
transition: all 1.6s;
}

let contactIcon = document.querySelectorAll(".contactIcon");
for (let i = 0; i < contactIcon.length; i++) {
contactIcon[i].addEventListener("click", function () {
let contactInfo = contactIcon[i].querySelector(".contactInfo");
if (contactInfo.style.opacity == "0") {
contactInfo.style.opacity = "1";
} else {
contactInfo.style.opacity = "0";
}
});
}

注。我附加了内联样式，让你看到，它是如何被contactInfo.style.opacity == "0"检测到的，这里没有内联样式是更好的方法:

let contactIcon = document.querySelectorAll(".contactIcon");
for (let i = 0; i < contactIcon.length; i++) {
contactIcon[i].addEventListener("click", function () {
let contactInfo = contactIcon[i].querySelector(".contactInfo");
if (contactInfo.style.opacity == "1") {
contactInfo.style.opacity = "0";
contactInfo.style.width = "0";
} else {
contactInfo.style.opacity = "1";
contactInfo.style.width = "92px";
}
});
}

.contactIcon {
width: 240px;
border-width: 2px;
border-style: dashed;
border-color: red;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.contactInfo {
overflow: hidden;
opacity: 1;
width: 0;
transition: all 1.6s;
/*transition: visibility 0s, opacity 0.3s, max-width 0.6s linear;*/
}

<div class="contacts">
<div class="contactIcon">ICON<span class="contactInfo"> (+xx)xxxxxxx</span></div>
<div class="contactIcon">
ICON
<span class="contactInfo"> (+xx)xxxxxxx</span>
</div>
</div>

Answer 2

try this

let contactIcon = document.querySelectorAll('.contactIcon');
for (let i = 0; i < contactIcon.length; i++) {
contactIcon[i].addEventListener('click', function () {
let contactInfo = contactIcon[i].querySelector('.contactInfo');
let icon = contactIcon[i].querySelector('.icon');
if (contactInfo.style.opacity == 0) {
icon.style.marginLeft = '-40px';
icon.style.opacity = 0;
contactInfo.style.display = 'inline';
contactInfo.style.opacity = 1;
contactInfo.style.maxWidth ='100px';
}
else {
icon.style.marginLeft = '0';
icon.style.opacity = 1;
contactInfo.style.opacity = 0;
contactInfo.style.maxWidth = '0';
}
});
}

.contactIcon {
overflow: hidden;
cursor : pointer;
}
.icon {
opacity: 1;
margin-left: 0;
transition: all .3s ease-in;
}
.contactInfo {
opacity: 0;
max-width: 500px;
transition: opacity .3s ease-in;
}

<div class="contacts">
<div class="contactIcon"><i class="icon 1">✈️</i><span class="contactInfo"> (+xx)xxxxxxx</span></div>
<div class="contactIcon"><i class="icon 2">✈️</i><span class="contactInfo"> (+xx)xxxxxxx</span></div>
</div>