Missing transitions with sidebar component in bootstrap-vue

Question

I'm using the b-sidebar component of the bootstrap-vue library in my vue 2 app:

 "dependencies": {
    "vue": "^2.7.7",
    "bootstrap": "^4.6.1",
    "bootstrap-vue": "^2.22.0"
  },
  "devDependencies": {
    "sass": "1.64.2",
    "@vitejs/plugin-legacy": "^2.0.0",
    "@vitejs/plugin-vue2": "^1.1.2",
    "terser": "^5.14.2",
    "vite": "^3.0.2"
  }

The entry point main.js:

import Vue from 'vue'
import { BootstrapVue, BootstrapVueIcons } from 'bootstrap-vue'
import App from './App.vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(BootstrapVue)
Vue.use(BootstrapVueIcons)

new Vue({
  render: (h) => h(App)
}).$mount('#app')

The docs for the b-sidebar component say that the default behaviour is a sliding animation, with a fade for the backdrop (if available). I can't get that working with my app, the sidebar and backdrop just pop in without any transition/animation. I've tried to reproduce the problem with a minimal example, using this basic example App.vue with a sample from the docs:

<template>
  <div>
    <b-button v-b-toggle.sidebar-border>Toggle Sidebar</b-button>
    <b-sidebar id="sidebar-border" sidebar-class="border-right border-danger">
      <div class="px-3 py-2">
        <p>
          Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis
          in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
        </p>
        <b-img src="https://picsum.photos/500/500/?image=54" fluid thumbnail></b-img>
      </div>
    </b-sidebar>
  </div>
</template>

Again, the sidebar just pops in with no transition. I am including the bootstrap and bootstrap-vue styles in main.js. Also, none of the examples on the docs page linked above demonstrate the sliding behaviour (for me anyway, Chrome and Firefox on macos, and I don't have any browser settings enabled that would disable motion related functionality).

The only related prop no-slide the docs mention is for disabling the transition, and I have tried including that with the value false (which is the default value). Why don't I get the transitions?

Answer 1

The issue was that I had the reduce motion setting enabled on my mac, which enables the prefers-reduced-motion CSS media query that bootstrap respects with regard to animations and transitions.