Question

我是css过渡的新手，正在尝试尝试使用ng-include在我的angularjs项目中包含的两个子模板之间的过渡动画。

我试图复制here看到的效果（点击下拉列表中的翻转选项）。但是我似乎无法使用新添加的模板来正确地为其入口设置动画。离开模板＆＃39;翻转＆＃39; out，但输入的模板只是出现而不是“翻转”。 in。

我的页面具有以下基本结构：

<div class="content">
  <div class="page flip" ng-include="something"></div>
</div>

我正在使用以下css：

.content {
    -webkit-perspective: 600px;
    perspective: 600px;
    position:relative;
}
.page{
  position:absolute;
  background:red;
}
.content .page.flip {
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

.content .page.flip.ng-enter {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
}
.content .page.flip.ng-enter-active {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}
.content .page.flip.ng-leave {
  -webkit-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

.content .page.flip.ng-leave-active {
  -webkit-transform: rotateX(180deg);
  transform: rotateX(180deg);
}

我通过调整角网站here的ng-include演示来说明问题。

有人能指出我出错的地方吗？

动画ng-include翻转

0 个答案: