Question

我有两个div，顶部和底部。两个div都有动态高度，顶部div根据变量显示或隐藏。

在显示或隐藏时，我想在顶部div中添加一个滑动动画，但是底部div应该与顶部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%);
    }
}

非常感谢您的帮助。

Answer 1

您在寻找类似的东西吗？然后请尝试以下方法：

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>

Answer 2

我会使用CSS过渡而不是动画。我发现最简单的方法是为下div而不是上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>

Answer 3

尝试此代码，看看这是否是您想要的效果。它使用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;
});

Working Codepen demo of my solution

Here关于如何使用Animate.css库的更多说明。

隐藏/显示div时滑动动画

3 个答案: