ngAnimate - 如何删除 NgLeave 添加的延迟？答案

【问题标题】：ngAnimate - How to Remove NgLeave Added Delay?ngAnimate - 如何删除 NgLeave 添加的延迟？
【发布时间】：2016-09-04 13:48:35
【问题描述】：

我正在构建一个 angularJs 应用程序，它应该通过扩展和缩小包含 div 的 div 来显示和消失。我正在使用 ngAnimate 来控制具有特殊“ng-”css 类的动画。该演示似乎正在运行，但是 ng-leave 命令有一个奇怪的延迟。在我的示例中，当您在按钮上释放鼠标时，div 会立即开始增长。但是，当关闭 div 时，在单击按钮和 div 开始缩小之间存在非常明显的时间延迟。您可以在此处查看问题：

http://jsfiddle.net/evoilliot/7tb4g/

<div ng-app="myApp">
    <div ng-controller="AppCtrl">
        <input type="checkbox" ng-model="showDiv" id="showDiv" />
        <label for="showDiv">Toggle DIV</label>
        <div id="my-div" ng-if="showDiv" class="animate-if">He ben voilà, ça fonctionne !</div>
    </div>
</div>

#my-div {
    background-color: cornflowerblue;
    /* pour l'ex, on met une hauteur au div, pour qu'il soit suffisament
    haut pour le voir bien... */
    height: 200px;
}
/*
Pour dire en CSS3 ce qui devra être animé :
Angular ajoute dynamiquement des classes CSS.
La transition se fait soit entre ng-enter et ng-enter-active
ou entre ng-leave et ng-leave-active.
*/
 .animate-if.ng-enter, .animate-if.ng-leave {
    -webkit-transition: 1s linear all;
    -moz-transition: 1s linear all;
    -ms-transition: 1s linear all;
    -o-transition: 1s linear all;
    transition: 1s linear all;
}
/* du début de l'entrée */
 .animate-if.ng-enter {
    max-height: 0;
    opacity: 0;
}
/* à la fin de l'entrée */
 .animate-if.ng-enter.ng-enter-active {
    max-height: 999px;
    opacity:1;
}
/* du début de la sortie */
 .animate-if.ng-leave {
    max-height: 999px;
    opacity:1;
}
/* à la fin de la sortie */
 .animate-if.ng-leave.ng-leave-active {
    max-height: 0;
    opacity:1;
}

这是 ngAnimate 中的错误吗？我只是在这里做错了吗？谢谢。

【问题讨论】：

标签： javascript css angularjs ng-animate

【解决方案1】：

Updated fiddle

修复延迟解决方案：

为元素放置cubic-bezier(0, 1, 0, 1)转换函数。

.text {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.5s cubic-bezier(0, 1, 0, 1);
  &.full {
    max-height: 1000px;
    transition: max-height 1s ease-in-out;
}

【讨论】：

【解决方案2】：

发生这种情况的原因是因为您的包含 div 的高度为 200 像素，但您的动画正在将内部 div 增加到 999 像素。当您触发缩小动画时，它似乎被延迟了，因为您看不到额外的 799px 消失。如果您在每个动画中将“最大高度”更改为 200 像素，它应该会正确执行。

【讨论】：