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

我正在构建一个angularJs应用程序，该应用程序应该通过展开和缩小div来显示并消失div。我正在使用ngAnimate来控制具有特殊“ng-”css类的动画。演示似乎正在工作，但ng-leave命令有一个奇怪的延迟。在我的例子中，当你在按钮上释放鼠标时，div立即开始增长。但是，关闭div时，点击按钮和div开始收缩之间存在非常明显的时间延迟。你可以看到这里的问题：ngAnimate - 如何删除NgLeave添加延迟？

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的错误吗？我在这里做错了什么吗？谢谢。

来源

2016-05-09 Jimothy

发生这种情况的原因是因为您的div包含200px的高度，但您的动画将内部div增加到999px。当你触发缩小的动画时，它看起来会被延迟，因为你看不到多余的799px会消失。如果您在每个动画中将“max-height”更改为200px，则它应该正确执行。

来源

2016-05-10 00:40:45 sourdoughdetzel

Updated fiddle

修复延迟溶液：

将立方贝塞尔（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; 
}

来源

2016-08-23 15:09:12

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

回答

相关问题