Angularjs用于显示和隐藏不同的动画

时间:2016-06-06 15:15:01

标签: css angularjs

我正在为我的项目使用Angularjs,我正在尝试动画卡加载和退出屏幕。以下是我到目前为止所遇到的唯一问题是卡片在进入页面和退出时具有相同的动画。有没有办法让不同的动画显示和隐藏。

card.ng-enter, 
card.ng-leave { 
    -webkit-transition: 400ms ease-in all;
    -moz-transition: 400ms ease-in all;
    -ms-transition: 400ms ease-in all;
    -o-transition: 400ms ease-in all;
    transition: 400ms ease-in all;

    position: relative;
    display: block;  
} 

card.ng-leave.ng-leave-active,
card.ng-enter {
    -webkit-transform: scale3d(1,0,1);
    -moz-transform: scale3d(1,0,1);
    -ms-transform: scale3d(1,0,1);
    -o-transform: scale3d(1,0,1);
}

card.ng-enter.ng-enter-active,
card.ng-leave {
    -webkit-transform: scale3d(1,1,1);
    -moz-transform: scale3d(1,1,1);
    -ms-transform: scale3d(1,1,1);
    -o-transform: scale3d(1,1,1);
}

希望这是有道理的

0 个答案:

没有答案