Angular2 ngClass无法单击Closing类

Question

我有一个手风琴，它有两个开放和关闭课程。在打开时，该类工作正常但是为了关闭，它正在上课，但是css类的功能不起作用。 这是我的

HTML代码：

<div class="slideInDown" [ngClass]="{slideInDown: groupUser?.isOpen, 'slideOutUp':  !groupUser?.isOpen}">

CSS：

开课：

#wd-faq .outer .slideInDown{
-webkit-animation-name: slideInDown;
animation-name: slideInDown;
-webkit-animation-duration: 80ms;
animation-duration: 80ms;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes slideInDown {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes slideInDown {
0% {
-webkit-transform: translateY(-100%);
transform: translateY(-100%);
visibility: visible;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}

结束课程：

#wd-faq .outer .slideOutUp {
 -webkit-animation-name: slideOutUp;
 animation-name: slideOutUp;
 -webkit-animation-duration: 80ms;
 animation-duration: 80ms;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
 }
 @-webkit-keyframes slideOutUp {
 0% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 }
 100% {
 visibility: hidden;
 -webkit-transform: translateY(-100%);
 transform: translateY(-100%);
 }
 }
 @keyframes slideOutUp {
 0% {
 -webkit-transform: translateY(0);
 transform: translateY(0);
 }
 100% {
 visibility: hidden;
 -webkit-transform: translateY(-100%);
 transform: translateY(-100%);
 }
 }

请帮助。