Fix snackbar animation and refactor

src/components/VSnackbar/VSnackbar.js

@@ -1,22 +1,12 @@
 import '../../stylus/components/_snackbars.styl'
 
-import {
- VSlideYTransition,
- VSlideYReverseTransition
-} from '../transitions'
-
 import Colorable from '../../mixins/colorable'
 import Toggleable from '../../mixins/toggleable'
 import { factory as PositionableFactory } from '../../mixins/positionable'
 
 export default {
  name: 'v-snackbar',
 
- components: {
- VSlideYTransition,
- VSlideYReverseTransition
- },
-
  mixins: [Colorable, Toggleable, PositionableFactory(['absolute', 'top', 'bottom', 'left', 'right'])],
 
  data () {
@@ -47,9 +37,6 @@ export default {
  'snack--top': this.top,
  'snack--vertical': this.vertical
  })
- },
- computedTransition () {
- return this.top ? 'v-slide-y-transition' : 'v-slide-y-reverse-transition'
  }
  },
 
@@ -79,15 +66,21 @@ export default {
  const children = []
 
  if (this.isActive) {
- children.push(h('div', {
- staticClass: 'snack__content'
- }, this.$slots.default))
+ children.push(
+ h('div', {
+ staticClass: 'snack',
+ class: this.classes,
+ on: this.$listeners
+ }, [
+ h('div', {
+ staticClass: 'snack__content'
+ }, this.$slots.default)
+ ])
+ )
  }
 
- return h('div', {
- staticClass: 'snack',
- 'class': this.classes,
- on: this.$listeners
- }, [h(this.computedTransition, children)])
+ return h('transition', {
+ attrs: { name: 'snack-transition' }
+ }, children)
  }
 }

src/components/VSnackbar/VSnackbar.spec.js

@@ -3,14 +3,19 @@ import VSnackbar from '@components/VSnackbar'
 
 test('VSnackbar.vue', ({ mount }) => {
  it('should have a snack class', () => {
- const wrapper = mount(VSnackbar)
+ const wrapper = mount(VSnackbar, {
+ propsData: {
+ value: true
+ }
+ })
 
  expect(wrapper.hasClass('snack')).toBe(true)
  })
 
  it('should have a color class', () => {
  const wrapper = mount(VSnackbar, {
  propsData: {
+ value: true,
  color: 'orange lighten-2'
  }
  })

src/stylus/components/_snackbars.styl

@@ -1,79 +1,56 @@
 @import '../bootstrap'
 
 .snack
- background-color: $snackbar-background-color
  position: fixed
  display: flex
- height: 0
+ z-index: 1000
+ width: 100%
  pointer-events: none
  visibility: visible
- z-index: 1000
+ background-color: $snackbar-background-color
 
  &--absolute
  position: absolute
 
- &--top
- top: 0
- left: 50%
+ &--top, &--bottom
  transform: translate(-50%, 0)
-
- &--bottom
- bottom: 48px
  left: 50%
- transform: translate(-50%, 0)
-
- &--left
- left: 8px
- right: initial
- transform: none
-
- &.snack--top
- top: 8px
-
- &.snack--bottom
- bottom: 56px
-
- &--right
- left: initial
- right: 8px
- transform: none
 
-  &.snack--top
-  top: 8px
+ &--top
+ top: 0
 
- &.snack--bottom
- top: initial
- bottom: 56px
+ &--bottom
+ bottom: 0
 
  &__content
  background-color: inherit
- padding: 14px 24px
- border-radius: 2px
+ padding: 14px 8px 14px 24px
  pointer-events: auto
- max-width: 568px
- min-width: 288px
+ width: 100%
  height: 48px
  align-items: center
- color: #fff
+ color: $snackbar-color
  display: flex
  font-size: 14px
  justify-content: space-between
- transition: .4s $transition.swing
  position: relative !important
  elevation(6)
 
+ .snack__action
+ min-width: auto
+
  .btn
- margin: 0 0 0 48px
+ color: $snackbar-color
+ margin: 0 0 0 8px
+ min-width: 0px
+
+ &__content::before
+ display: none
 
-.snack
  &--multi-line &__content
  height: 80px
  padding: 24px
 
- &--bottom, &--right
- &.snack--multi-line
- bottom: 80px
-
  &--vertical &__content
  height: 112px
  padding: 24px 24px 14px
@@ -83,28 +60,57 @@
  .btn
  align-self: flex-end
 
- &--bottom, &--right
- &.snack--vertical
- bottom: 112px
-
-@media $display-breakpoints.xs-only
+@media $display-breakpoints.sm-and-up
  .snack
- width: 100%
- left: 0
- right: initial
- transform: none
+ width: auto
 
- &--right, &--left
- &.snack--top
- top: 0
+ &--left, &--right
+ &^[0]--top
+ transform: translate(0, $snackbar-corner-offset)
+ &^[0]--bottom
+ transform: translate(0, 0 - $snackbar-corner-offset)
 
- &.snack--bottom
- bottom: 48px
+ &--left
+ left: $snackbar-corner-offset
+ right: initial
+
+ &--right
+ right: $snackbar-corner-offset
+ left: initial
 
  &__content
- border-radius: 0
- max-width: 100%
- width: 100%
+ border-radius: 2px
+ max-width: 568px
+ min-width: 288px
 
  .btn
- margin: 0 0 0 24px
+ margin-left: 32px
+
+.snack-transition
+ &-enter-active,
+ &-leave-active
+ transition: transform .4s $transition.swing
+ .snack__content
+ transition: opacity .4s linear
+
+ &-enter
+ .snack__content
+ opacity: 0
+
+ &-enter-to,
+ &-leave
+ .snack__content
+ opacity: 1
+
+ &-enter,
+ &-leave-to
+ &.snack--top
+ transform: translate(-50%, -100%)
+ &.snack--bottom
+ transform: translate(-50%, 100%)
+ @media $display-breakpoints.sm-and-up
+ &.snack--left, &.snack--right
+ &.snack--top
+ transform: translate(0, -100%)
+ &.snack--bottom
+ transform: translate(0, 100%)

src/stylus/settings/_variables.styl

@@ -284,7 +284,9 @@ $navigation-drawer-item-font-weight := $font-weights.medium
 $navigation-drawer-group-item-font-weight := $font-weights.regular
 
 /** Snackbar */
+$snackbar-color := #fff
 $snackbar-background-color := #323232
+$snackbar-corner-offset := 8px
 
 // Tab
 $tab-text-transform := uppercase