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

nbysray5 于 2023-04-08 发布在 Java

关注(0)|答案(2)|浏览(265)

我试图使一个联系人图标，当按下移动到一边，揭示联系人信息。我想文本保持中心和联系人信息淡入。到目前为止，我有这个：

<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;
}

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

css

来源：https://stackoverflow.com/questions/75958543/animating-an-element-being-added-on-click-with-javascript

2条答案

按热度按时间

huus2vyu1#

后一个问题很容易回答：contactInfo.style.display == 'none'只检测内联样式，所以你必须从css中删除display:none;并将其附加到html span。至于动画，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";
    }
  });
}

p.s.我附上了inline style，让你看看，它是如何被contactInfo.style.opacity == "0"检测到的，这里是没有inline style的更好方法：

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>

赞(0）回复(0）举报 2023-04-08

dw1jzc5e2#

试试这个

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>

赞(0）回复(0）举报 2023-04-08

我来回答

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

2条答案

相关问题

热门标签

最新问答