Question

我正在寻找按下按钮后慢慢更改页面的方法。我想只使用没有jQuery的JS。现在我有更改块的脚本，但我使用display none;我不确定我是否可以添加缓慢更改的页面。我试图使用tramsform属性，但效果不好。我不需要任何溢出。它必须看起来接近https://tympanus.net/Development/PageTransitions/

var acc = document.getElementsByClassName("btn-arrow");

for (var i = 0; i < acc.length; i++) {
    acc[i].onclick = function showNext(){
   
    var parent = this.parentElement;
    var nextToOpen = parent.nextElementSibling;
   
    nextToOpen.style.display ="block";  
    parent.style.display ="none";
    
}
}

.big{
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: initial;
    overflow: hidden;
}
.one{
    background:pink;
    width: 100vw;
    height: 100vh;
    display: flex;    
    justify-content: center;
    align-items: flex-end;
    
}
.two{
    background:green;
    width: 100vw;
    height: 100vh;
    display:none;
    

}
.icon-arrow-down2{
    font-size: 60px;
    color: silver;
    margin-bottom: 50px;
}
.btn-arrow{   
    background-color : rgb(255, 238, 192);
    box-shadow: none;
    border: none;
}
.btn-arrow:hover{      
    border: none;
}
button, 
button:active, 
button:focus {
    outline: none;
}

 <div class="big">
        <div class="one">
            <button class="btn-arrow" onclick="showNext()">
                <span class="icon-arrow-down2"></span>
            </button>

        </div>
        <div class="two"></div>
    </div>

Answer 1

你必须使用css动画。我添加了一些修改，指出你正确的方向。但基本上，我的建议是：

您的所有网页都具有相同的类别（.page），然后每个页面都有不同的背景颜色。
您需要一个特定的类（.page-visible），该类将添加到您要显示的下一页，并从当前可见页面中删除。这个类只控制可见性。请注意，上一课程（.page）有display: none;，这是所有网页的常见类。
每个动作都需要不同的动画（向上移动，向下移动，从左向右移动，从右向左移动）。我刚在代码片段中添加了一个例子。
然后魔术会听到animationend事件：您将动画应用于两个页面（当前可见页面和下一页面），使应用.page-visible类使下一页可见，并听取endanimation事件。当它发生时，只需隐藏删除.page-visible类的prev页面，然后删除动画类。

该代码仅适用于这两页（一和二），但您可以轻松优化它。我建议你看一下the original page you posted，查看他们的css和他们的js（开放的chrome开发人员工具并转到Sources，他们没有缩小文件，所以你会看到他们如何做所有事情:)

这对你有意义吗？我希望它有所帮助，并指出你正确的方向。动画非常有趣！：）

（编辑：啊！我在按钮上添加了一些宽度和高度，以便能够看到它，嘿嘿，它现在在左下角）。

＆＃13;

var acc = document.getElementsByClassName("btn-arrow");

for (var i = 0; i < acc.length; i++) {
    acc[i].onclick = function showNext(){
      var visibleElement = document.getElementsByClassName('page-visible')[0];
      var nextToOpen = visibleElement.nextElementSibling;
      
      nextToOpen.addEventListener('animationend', () => {
        visibleElement.classList.remove('page-visible');
        visibleElement.classList.remove('page-moveUp');
        nextToOpen.classList.remove('page-moveUp');
      });
      visibleElement.classList.add('page-moveUp');
      nextToOpen.classList.add('page-visible');
      nextToOpen.classList.add('page-moveUp');
    }
}

＆＃13;

.page{
  display: none;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  justify-content: center;
}
.page-moveUp {
  animation: moveUp .6s ease both;
}
@keyframes moveUp {
  from { }
  to { transform: translateY(-100%); }
}

.page-visible {
  display: block;
}
.one {
  background:pink;
}
.two {
  background:green;
}
.icon-arrow-down2{
  font-size: 60px;
  color: silver;
  margin-bottom: 50px;
}
.btn-arrow{   
  background-color : rgb(255, 238, 192);
  height: 20px;
  width: 50px;
  box-shadow: none;
  border: none;
}
.btn-arrow:hover{      
  border: none;
}
button, 
button:active, 
button:focus {
  outline: none;
}

＆＃13;

<div class="big">
  <button class="btn-arrow">
      <span class="icon-arrow-down2"></span>
  </button>
  <div class="page page-visible one"></div>
  <div class="page two"></div>
</div>

＆＃13;

如何在页面相互更改时添加动画？

1 个答案: