隐藏/显示div时的滑动动画

Question

隐藏/显示div时的滑动动画

3

我有两个 div，一个是 top，一个是 bottom。两个 div 都具有动态高度，top div 将根据变量显示或隐藏。

当显示或隐藏 top div 时，我希望添加滑动动画，但是 bottom div 应该跟随 top div 并与其一起滑动。

var hide = true;
var trigger = document.getElementById("trigger");
var topdiv = document.getElementById("topdiv");

trigger.addEventListener('click', function() {
 if (hide) {
   topdiv.classList.add('hide');
  } else {
   topdiv.classList.remove('hide');
  }
  hide = !hide;
});

div {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
}


.top {
  background: #999;
}

.body {
  background: #555;
}

.hide {
  display: none !important;
}

<div id="topdiv" class="top hide">
<p>Top</p>
</div>
<div class="body">
<p>Body</p>
<button id="trigger">
Trigger
</button>
</div>

我尝试添加变换动画，但只有顶部的div受到影响，而底部的div保持不变。

@keyframes topDivAnimate {
    from {
        transform: translateY(-100%);
    }

    to {
        transform:translateY(0%);
    }
}

非常感谢帮助。

- jscripten

那么你是否也希望第二个 div 被隐藏，就像第一个一样？ - ondrejm

不，仅翻译第一个，就像上面的例子一样。 - jscripten

3个回答

3

我建议使用CSS过渡效果而不是动画。通过对下部div进行动画处理，我发现这是最容易实现的方法，可以改变其位置以覆盖上部的div（或者当然也可以不覆盖）。请参见以下演示，我尽可能地对CSS和JS做了最少的更改：

var cover = true;
var trigger = document.getElementById("trigger");
var bottomdiv = document.getElementsByClassName("body")[0];

trigger.addEventListener('click', function() {
 if (cover) {
   bottomdiv.classList.add('cover');
  } else {
   bottomdiv.classList.remove('cover');
  }
  cover = !cover;
});

div {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
}


.top {
  background: #999;
}

.body {
  background: #555;
  transform: translateY(0%);
  transition: transform 0.5s;
}

.cover {
  transform: translateY(-100%);
}

<div id="topdiv" class="top hide">
<p>Top</p>
</div>
<div class="body">
<p>Body</p>
<button id="trigger">
Trigger
</button>
</div>

- Robin Zigmond

这是一个很好的答案，但由于正文和顶部div的高度都是动态的，所以它不会那么容易实现。我通过对顶部div的max-height进行动画处理找到了一个更小的解决方案，在隐藏时将其设置为0，在显示时将其设置为最大合理高度。当max-height和顶部div的实际高度之间存在很大差异时，动画会有一些延迟，但在我的情况下它运行良好！ - jscripten

0

尝试这段代码，看看是否达到了你想要的效果。它使用了Animate.css库，所以你需要在<head></head>中链接它。

function animateCSS(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)

        if (typeof callback === 'function') callback()
    }

    node.addEventListener('animationend', handleAnimationEnd)
}

var hide = false;
var trigger = document.getElementById("trigger");
var topdiv = document.getElementById("topdiv");

trigger.addEventListener('click', function() {
    if (!hide) {
    topdiv.classList.remove('hide');
    animateCSS('.body', 'slideInDown');
    animateCSS('#topdiv', 'slideInDown');
  } else {
    animateCSS('#topdiv', 'slideOutUp', function() {
      topdiv.classList.add('hide');
    })
    animateCSS('.body', 'slideOutUp');
  }
  hide = !hide;
});

我的解决方案的工作Codepen演示

这里有关于如何使用Animate.css库的更多解释。

- ondrejm

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Joykal Infotech · Accepted Answer

你是否正在寻找类似于这样的东西？那么请尝试这个：

最初的回答：

var trigger = document.getElementById("trigger");
var topdiv = document.getElementById("topdiv");

trigger.addEventListener('click', function() {
 if ($('#topdiv').css('display') == 'none') {
   $(topdiv).slideDown();
  } else {
   $(topdiv).slideUp();
  }
});

div {
  position: relative;
  display: block;
  width: 100%;
  padding: 10px;
}


.top {
  display: none;
  background: #999;
}

.body {
  background: #555;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="topdiv" class="top hide">
<p>Top</p>
</div>
<div class="body">
<p>Body</p>
<button id="trigger">
Trigger
</button>
</div>