[Vuejs]-How to disable vuejs transitions

by

0👍

You can probably achieve this in two ways. The first would be to use the screen.width javascript function and use that in a ternary operator to determine if the transition should be activated. 

<script>
import Velocity from 'velocity-animate'

export default {
  data: () => ({
    width: 0,
  })
  mounted() {
    this.$nextTick(() => {
      this.width = screen.width
    })
  },
  methods: {
    expandAnimEnter: function (el, done) {
      Velocity(el, 'slideDown', { complete: done })
    },
    expandAnimLeave: function (el, done) {
      Velocity(el, 'slideUp', {complete: done})
    }
  }
}
</script>

Then in your html use that width element in your ternary operator.

<template>
  <transition 
  v-bind:css="false"
  v-on:enter="width > 600 ? expandAnimEnter : false"
  v-on:leave="width > 600 ? expandAnimLeave : false">
    <slot></slot>
  </transition>
</template>

Or you could have an if statement in your methods:

methods: {
    expandAnimEnter: function (el, done) {
      if(this.width > 600) {
        Velocity(el, 'slideDown', { complete: done })
      }
    },
    expandAnimLeave: function (el, done) {
      if(this.width > 600) {
        Velocity(el, 'slideUp', { complete: done })
      }
    }
  }

The other way, as I see you’re using vuetify, is to use it’s hidden property.

<template>
  <transition
  hidden-xs-and-down
  v-bind:css="false"
  v-on:enter="expandAnimEnter"
  v-on:leave="expandAnimLeave">
    <slot></slot>
  </transition>
  <transition
  hidden-sm-and-up>
    <slot></slot>
  </transition>
</template>

or just use a v-if there instead.

Leave a comment