Javascript AngularJS：为固定位置元素上的ng显示和ng隐藏设置动画

动画似乎不起作用

<div ng-cloak class="customize-modal text-white" ng-show="isMenuOpened == true">
    ...
</div>

---

我刚刚设置了

$scope.ismenuOpen

true和false来显示和隐藏它。

这个

ng hide

类放置了一个

display:none！重要提示

，这就是为什么您看不到动画的实际效果

为了模拟转换，我创建了一个

my ng hide

类，它将我们带到您想要的

max width:0px

。按下按钮切换，查看行为

正在处理下面的片段：

var-app=angular.module（'myApp'，[]）；
应用程序控制器（'myCtrl'，函数（$scope）{
$scope.addAClass=函数（）{
（$scope.myVar）？$scope.myVar=false:$scope.myVar=true；
}
});
。自定义模式{
位置：固定；
左：0；
最高：50%；
转化：translateY（-50%）；
背景：rgba（0,0,0,0.8）；
宽度：70vw；
最大宽度：100vw；
最大高度：100vh；
溢出：滚动；
填充：10px；
-webkit过渡：最大宽度0.5s线性；
-moz过渡：最大宽度0.5s线性；
-o型过渡：最大宽度0.5s线性；
过渡：最大宽度0.5s线性；
}
.customize-modal.my-ng-hide{
最大宽度：0px；
}

是否添加了我的ng隐藏类？{{myVar}}。。。单击以切换
如果ng没有显示相同的结果，请尝试使用ng，如果没有动画，请尝试将IsMenuOpen放入对象中，然后重试，例如$scope.info={IsMenuOpen:false}。。。
.customize-modal {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.8);
    max-width: 100vw;
    max-height: 100vh;
    overflow: scroll;
    padding: 10px;
    -webkit-transition: max-width 0.5s linear;
    -moz-transition: max-width 0.5s linear;
    -o-transition: max-width 0.5s linear;
    transition: max-width 0.5s linear;
}

    .customize-modal.ng-hide {
        max-width: 0px;
    }