.animate-enter, 
.animate-leave { 
    -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
    position: relative;
    display: block;
} 
 
.animate-leave.animate-leave-active,
.animate-enter {
    -webkit-transform: skewX(45deg) skewY(30deg);
    -moz-transform: skewX(45deg) skewY(30deg);
    -ms-transform: skewX(45deg) skewY(30deg);
    -o-transform: skewX(45deg) skewY(30deg);
    transform: skewX(45deg) skewY(30deg);
    opacity: 0;
    height: 0px;
}        
 
.animate-enter.animate-enter-active,
.animate-leave {
    -webkit-transform: skewX(0deg) skewY(0deg);
    -moz-transform: skewX(0deg) skewY(0deg);
    -ms-transform: skewX(0deg) skewY(0deg);
    -o-transform: skewX(0deg) skewY(0deg);
    transform: skewX(0deg) skewY(0deg);
    opacity: 1;
    height: 30px;
}