Question

我创建了 Plunker 来演示问题：

点击切换按钮
动画开始
1秒后离开元素从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 bug，还是我弄乱了什么？

AngularJS - 动画持续时间超过预期

0 个答案: