页面转换时反转动画

Question

我的网站上有几页，我制作了一个标题动画（下拉菜单）。因此，当单击另一个页面时，我需要反转我的动画（pullUp）。有没有选择呢？或者是否有任何选项可以在其他页面被清除时使第二个动画（pullup）处于活动状态

header{
  background-color:black;
  height:80px;
  text-align:center;
animation-name: pullDown;
    -webkit-animation-name: pullDown;   

    animation-duration: 2s; 
    -webkit-animation-duration: 2s;

    animation-timing-function: ease-out;    
    -webkit-animation-timing-function: ease-out;    

    transform-origin: 50% 0%;
    -ms-transform-origin: 50% 0%;
    -webkit-transform-origin: 50% 0%;       
}

.pullUp{
    animation-name: pullUp;
    -webkit-animation-name: pullUp; 

    animation-duration: 1.1s;   
    -webkit-animation-duration: 1.1s;

    animation-timing-function: ease-out;    
    -webkit-animation-timing-function: ease-out;    

    transform-origin: 50% 100%;
    -ms-transform-origin: 50% 100%;
    -webkit-transform-origin: 50% 100%;         
}

@keyframes pullUp {
    0% {
        transform: scaleY(0.1);
    }
    40% {
        transform: scaleY(1.02);
    }
    60% {
        transform: scaleY(0.98);
    }
    80% {
        transform: scaleY(1.01);
    }
    100% {
        transform: scaleY(0.98);
    }               
    80% {
        transform: scaleY(1.01);
    }
    100% {
        transform: scaleY(1);
    }                           
}

@-webkit-keyframes pullUp {
    0% {
        -webkit-transform: scaleY(0.1);
    }
    40% {
        -webkit-transform: scaleY(1.02);
    }
    60% {
        -webkit-transform: scaleY(0.98);
    }
    80% {
        -webkit-transform: scaleY(1.01);
    }
    100% {
        -webkit-transform: scaleY(0.98);
    }               
    80% {
        -webkit-transform: scaleY(1.01);
    }
    100% {
        -webkit-transform: scaleY(1);
    }       
}

Answer 1

我可以推荐一些选项：

1. 使用CSS的:active选择器绑定到“pulldown”项的哈希值：

```

第二页：active~ .drawer {

animation: "pullUp" 1s linear;

} ```

因此，当用户点击第二页（#second-page）的网址时，动画将会触发，从而隐藏抽屉本身。

1. 使用Javascript切换课程：

（jQuery的）

var $drawer = $(".drawer"); var $drawerToggle = $(".drawer-toggle").on("click", function() { $drawer.toggle("fast"); }

1. 使用input[type="checkbox"]'hack'：

.drawer-toggle:checked ~ .drawer { animation: "pullDown" 1s linear; } .drawer-toggle ~ .drawer { animation: "pullUp" 1s linear; }

Answer 2

这是我的代码http://codepen.io/anon/pen/zrXrXM，但据我所知，当我点击<a>元素时，页面转换会立即生效。有没有办法在几秒钟内停止转换？