diff --git a/README.md b/README.md index e623fc4..2944047 100644 --- a/README.md +++ b/README.md @@ -35,7 +35,7 @@ - [ ] Rate - [ ] Upload - [ ] Form -- [ ] Alert +- [x] Alert - [ ] Card - [ ] Message - [ ] Notice diff --git a/src/components/alert/alert.vue b/src/components/alert/alert.vue index bc7a204..a8b9e4a 100644 --- a/src/components/alert/alert.vue +++ b/src/components/alert/alert.vue @@ -1,18 +1,20 @@ diff --git a/src/components/switch/switch.vue b/src/components/switch/switch.vue index 6c5c480..ca5609e 100644 --- a/src/components/switch/switch.vue +++ b/src/components/switch/switch.vue @@ -30,7 +30,7 @@ data () { return { currentValue: this.value - } + }; }, computed: { wrapClasses () { diff --git a/src/index.js b/src/index.js index c7bee1f..a1752d4 100644 --- a/src/index.js +++ b/src/index.js @@ -2,7 +2,7 @@ import 'core-js/fn/array/find-index'; import Affix from './components/affix'; -// import Alert from './components/alert'; +import Alert from './components/alert'; // import BackTop from './components/back-top'; // import Badge from './components/badge'; // import Breadcrumb from './components/breadcrumb'; @@ -48,7 +48,7 @@ import locale from './locale'; const iview = { Affix, - // Alert, + Alert, // BackTop, // Badge, // Breadcrumb, diff --git a/src/styles/animation/ease.less b/src/styles/animation/ease.less index 6c4cdef..15e6508 100644 --- a/src/styles/animation/ease.less +++ b/src/styles/animation/ease.less @@ -1,11 +1,11 @@ .ease-motion(@className, @keyframeName) { .make-motion(@className, @keyframeName); - .@{className}-enter, .@{className}-appear { + .@{className}-enter-active, .@{className}-appear { opacity: 0; animation-timing-function: linear; animation-duration: @transition-time; } - .@{className}-leave { + .@{className}-leave-active { animation-timing-function: linear; animation-duration: @transition-time; } diff --git a/src/styles/animation/fade.less b/src/styles/animation/fade.less index 1c3bd95..ca83171 100644 --- a/src/styles/animation/fade.less +++ b/src/styles/animation/fade.less @@ -1,10 +1,10 @@ .fade-motion(@className, @keyframeName) { .make-motion(@className, @keyframeName); - .@{className}-enter, .@{className}-appear { + .@{className}-enter-active, .@{className}-appear { opacity: 0; animation-timing-function: linear; } - .@{className}-leave { + .@{className}-leave-active { animation-timing-function: linear; } } diff --git a/src/styles/animation/index.less b/src/styles/animation/index.less index 7a656ec..6603320 100644 --- a/src/styles/animation/index.less +++ b/src/styles/animation/index.less @@ -4,19 +4,19 @@ } .make-motion(@className, @keyframeName) { - .@{className}-enter, .@{className}-appear { + .@{className}-enter-active, .@{className}-appear { .motion-common(); animation-play-state: paused; } - .@{className}-leave { + .@{className}-leave-active { .motion-common(); animation-play-state: paused; } - .@{className}-enter, .@{className}-appear { + .@{className}-enter-active, .@{className}-appear { animation-name: ~"@{keyframeName}In"; animation-play-state: running; } - .@{className}-leave { + .@{className}-leave-active { animation-name: ~"@{keyframeName}Out"; animation-play-state: running; } diff --git a/src/styles/animation/move.less b/src/styles/animation/move.less index b622353..7513c59 100644 --- a/src/styles/animation/move.less +++ b/src/styles/animation/move.less @@ -1,10 +1,10 @@ .move-motion(@className, @keyframeName) { .make-motion(@className, @keyframeName); - .@{className}-enter, .@{className}-appear { + .@{className}-enter-active, .@{className}-appear { opacity: 0; animation-timing-function: @ease-in-out; } - .@{className}-leave { + .@{className}-leave-active { animation-timing-function: @ease-in-out; } } diff --git a/src/styles/animation/slide.less b/src/styles/animation/slide.less index c0d4b08..3b3efde 100644 --- a/src/styles/animation/slide.less +++ b/src/styles/animation/slide.less @@ -1,10 +1,10 @@ .slide-motion(@className, @keyframeName) { .make-motion(@className, @keyframeName); - .@{className}-enter, .@{className}-appear { + .@{className}-enter-active, .@{className}-appear { opacity: 0; animation-timing-function: @ease-in-out; } - .@{className}-leave { + .@{className}-leave-active { animation-timing-function: @ease-in-out; } } diff --git a/test/app.vue b/test/app.vue index e6e6ee9..524eefd 100644 --- a/test/app.vue +++ b/test/app.vue @@ -22,6 +22,7 @@ li + li { border-left: solid 1px #bbb; padding-left: 10px; margin-left: 10px; }
  • Steps
  • Timeline
  • Switch
    • +
  • Alert
    • diff --git a/test/main.js b/test/main.js index d0f7fa2..cdafab4 100644 --- a/test/main.js +++ b/test/main.js @@ -52,6 +52,10 @@ const router = new VueRouter({ { path: '/switch', component: require('./routers/switch.vue') + }, + { + path: '/alert', + component: require('./routers/alert.vue') } ] }); diff --git a/test/routers/alert.vue b/test/routers/alert.vue index c41289a..2f35647 100644 --- a/test/routers/alert.vue +++ b/test/routers/alert.vue @@ -1,33 +1,35 @@