Question

我正在构建一个应该有div的angularJs应用程序，通过扩展和缩小它包含div来消失。我使用ngAnimate来控制动画，使用特殊的＆＃34; ng - ＆＃34; 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中的错误吗？我在这里做错了吗？感谢。

Answer 1

发生这种情况的原因是因为你的包含div的高度为200px，但你的动画正在将内部div增加到999px。当你触发缩小的动画时，它似乎会延迟，因为你无法看到额外的799px消失。如果你改变你的＆＃34; max-height＆＃34;在每个动画中为200px，它应该正确执行。

Answer 2

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;
}

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

2 个答案: