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

究竟什么没有按预期工作？

如果你想让动画更多地运行＆＃34;流畅＆＃34;只需定义开始和结束：

Many

或使用@keyframes page-slide { from {left:100%; top:0px;} to {left:0%; top:0px;} }

translate3d

这是指示您所做更改的示例的链接：http://embed.plnkr.co/7bTcKhLWJmm4hXkdcRvN/preview

Answer 2

如果您只想使用CSS，则需要使用position:absolute容器包装position:relative。同时为所有容器设置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;}
}

使用@keyframes无法正常运行UI路由器

2 个答案: