0

我创建了这个Plunker来演示这个问题：

  • 单击切换按钮
  • 动画开始
  • 1s 后离开的元素被从 DOM 中移除（OK）
  • 进入的元素还没有完成动画（问题）

这是HTML：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript"
            src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular.min.js"></script>
    <script type="text/javascript" src="http://code.angularjs.org/1.2.0-rc.2/angular-animate.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <link href="app.css" type="text/css" rel="stylesheet">
    <title></title>
</head>
<body ng-app="app" ng-controller="AppCtrl as app">
<button ng-click="app.toggle = !app.toggle">Toggle</button>
<div class="container">
    <div class="toggle flipped" ng-if="!app.toggle">2</div>
    <div class="toggle" ng-if="app.toggle">1</div>
</div>
</body>
</html>

CSS：

.container{
    position: relative;
    width: 800px;
    height: 200px;
    border: solid 1px red;
    background-color: #CCC;
}

.toggle {
    -webkit-transition: linear 1s;
    -moz-transition: linear 1s;
    -ms-transition: linear 1s;
    -o-transition: linear 1s;
    transition: linear 1s;
    border: solid 1px #000000;
    height: 200px;
    width: 200px;
    top: 0;
    position: absolute;
    z-index: 1000;
    background-color: lightgreen;
}

.toggle.ng-enter{
    -webkit-transform: translateX(600px);
    transform: translateX(600px)
}

.toggle.ng-enter-active{
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.toggle.ng-leave{
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.toggle.ng-leave-active{
    -webkit-transform: translateX(600px);
    transform: translateX(600px)
}

.flipped{
    background-color: red;
}

和 JS：

var app = angular.module("app", ["ngAnimate"]);
app.controller("AppCtrl", function () {
    this.toggle = true;
});

它是一个 Angular 错误，还是我搞砸了什么？

4

0 回答 0