angularjs - 使用@keyframes 动画 UI 路由器不工作

Question

我正在尝试使用@keyframes 属性为 ui-router 设置动画。

我想实现的是当用户点击菜单中的一个元素时，页面飞进来

似乎没有按预期工作。

@keyframes page-slide {
  0%   {left:100%; top:0px;}
  25%  {left:75%; top:0px;}
  50%  {left:50%; top:0px;}
  75%  {left:25%; top:0px;}
  100% {left:0%; top:0px;}
}

有什么线索我可能在这里遗漏了什么吗？

Plnkr 链接:http://plnkr.co/edit/CXNaNogXwn8Vzg8rugDT?p=info

Answer 1

如果您只想使用 CSS，则需要使用 position:relative 容器包装 position:absolute。还为所有容器设置 height: 100%。

http://embed.plnkr.co/xOEgPjvNtfpcQAxj6rWY/preview

.container {
  position: relative;
  height: 100%;
}

.page-transition {
  width: 100%;
  height: 100%;
  position: absolute;
  animation-name: page-slide; 
  animation-duration: 4s;
}


@keyframes page-slide {
  0%   {left:100%; top:0px;}
  25%  {left:75%; top:0px;}
  50%  {left:50%; top:0px;}
  75%  {left:25%; top:0px;}
  100% {left:0%; top:0px;}
}