//
// 动画
// ============================================================

//[data-animtion="upward"]
//    @extend .alert-content-z-index
//    @extend .position-absolute
//    @extend .display-none
//    transform: translateY(50%)
//    opacity: 0
//
//    .item
//        &:hover, &:active
//            @extend .color
//            @extend .transition-1s
//            background: #f9f9f9
//
//    &.active
//        @extend .display-block
//        @extend .animation-timing-function-fill-mode
//        animation: select-list 1s
//        @keyframes select-list
//            100%
//                transform: translateY(0)
//                opacity: 1
//
//    &.unactive
//        animation: unselect-list 1s
//        @keyframes unselect-list
//            0%
//                transform: translateY(0)
//                opacity: 1
//            100%
//                @extend .display-block
//                transform: translateY(50%)
//                opacity: 0
[data-animtion]
    @extend .display-none
    @extend .opacity-0

    &.active
        @extend .display-block
        @extend .animation-timing-function-fill-mode
        animation: 1s defaultActive
        @keyframes defaultActive
            0%
                opacity: 0
            100%
                opacity: 1

        [data-animtion-move]
            @extend .animation-timing-function-fill-mode
            animation: 1s defaultActive

    &.unactive
        @extend .animation-timing-function-fill-mode
        animation: .5s defaultUnactive
        @keyframes defaultUnactive
            0%
                opacity: 1
            100%
                opacity: 0

        [data-animtion-move]
            @extend .animation-timing-function-fill-mode
            animation: 1s defaultUnactive

[data-animtion="upward"]

    [data-animtion-move]
        transform: translateY(50%)

    &.active
        @extend .display-block
        @extend .animation-timing-function-fill-mode
        animation: 1s upwardActive
        @keyframes upwardActive
            100%
                opacity: 1

        [data-animtion-move]
            @extend .animation-timing-function-fill-mode
            animation: 1s upwardMove
            @keyframes upwardMove
                100%
                    opacity: 1
                    transform: translateY(0)

    &.unactive
        @extend .animation-timing-function-fill-mode
        animation: .5s upwardUnactive
        @keyframes upwardUnactive
            0%
                opacity: 1
            100%
                opacity: 0

        [data-animtion-move]
            @extend .animation-timing-function-fill-mode
            animation: 1s upwardMove2
            @keyframes upwardMove2
                0%
                    opacity: 1
                    transform: translateY(0)
                100%
                    opacity: 0
                    transform: translateY(50%)

[data-animtion="scale"]
    @extend .display-none
    @extend .opacity-0
    [data-animtion-move]
        transform: scale(.5)
        transform-origin: center !important

    &.active
        @extend .display-block
        @extend .animation-timing-function-fill-mode
        animation: 1s showWarpper
        @keyframes showWarpper
            100%
                opacity: 1

        [data-animtion-move]
            @extend .animation-timing-function-fill-mode
            animation: 1s showMove
            @keyframes showMove
                70%
                    transform: scale(1.05)
                100%
                    opacity: 1
                    transform: scale(1)


    &.unactive
        @extend .animation-timing-function-fill-mode
        animation: .5s hideWarpper
        @keyframes hideWarpper
            0%
                opacity: 1
            100%
                opacity: 0

        [data-animtion-move]
            @extend .animation-timing-function-fill-mode
            animation: 1s hideMove
            @keyframes hideMove
                0%
                    opacity: 1
                    transform: scale(1)
                100%
                    opacity: 0
                    transform: scale(2)