Transitions not working with vue-cli and Vue >= 3.0.6

[netopolit]

Version

4.5.11

Reproduction link

https://github.com/netopolit/vue-cli-transition-issue

Environment info

  System:
    OS: macOS 11.2.2
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
  Binaries:
    Node: 14.15.4 - ~/.volta/tools/image/node/14.15.4/bin/node
    Yarn: Not Found
    npm: 7.5.4 - ~/.volta/tools/image/npm/7.5.4/bin/npm
  Browsers:
    Chrome: 88.0.4324.192
    Edge: Not Found
    Firefox: 86.0
    Safari: 14.0.3
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.0.3 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  4.5.11 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  4.5.11 
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.11 
    @vue/cli-plugin-eslint: ~4.5.0 => 4.5.11 
    @vue/cli-plugin-router: ~4.5.0 => 4.5.11 
    @vue/cli-plugin-typescript: ~4.5.0 => 4.5.11 
    @vue/cli-plugin-vuex: ~4.5.0 => 4.5.11 
    @vue/cli-service: ~4.5.0 => 4.5.11 
    @vue/cli-shared-utils:  4.5.11 
    @vue/compiler-core:  3.0.7 
    @vue/compiler-dom:  3.0.7 
    @vue/compiler-sfc: ^3.0.0 => 3.0.7 
    @vue/compiler-ssr:  3.0.7 
    @vue/component-compiler-utils:  3.2.0 
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0 
    @vue/eslint-config-typescript: ^5.0.2 => 5.1.0 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/reactivity:  3.0.7 
    @vue/runtime-core:  3.0.7 
    @vue/runtime-dom:  3.0.7 
    @vue/shared:  3.0.7 
    @vue/web-component-wrapper:  1.3.0 
    eslint-plugin-vue: ^7.0.0-0 => 7.7.0 
    typescript: ~3.9.3 => 3.9.9 
    vue: ^3.0.0 => 3.0.7 
    vue-eslint-parser:  7.6.0 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.6 (16.1.2)
    vue-router: ^4.0.0-0 => 4.0.4 
    vue-style-loader:  4.1.2 
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^4.0.0-0 => 4.0.0 
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

1. install and run the minimal reproduction app
2. click on the "Toggle show" button on the root page of the app.

What is expected?

Clicking on "Toggle show" button should cause text bellow the button to animate

What is actually happening?

There is no animation. Transition is not working

---

This feature should work with Vue 3.0.6 and 3.0.7, as demonstrated here https://jsfiddle.net/8b1ced2m/

[fangbinwei]

There is no css in your Home.vue. Are you trying to say that keyframes don't work under style scoped?

input

<style scoped>
.bounce-enter-active {
  animation: bounce-in 5s;
}
.bounce-leave-active {
  animation: bounce-in 5s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}
</style>

output Something like this is wrong 0%[data-v-fae5bece]

.bounce-enter-active[data-v-fae5bece] {
  -webkit-animation: bounce-in-fae5bece 5s;
          animation: bounce-in-fae5bece 5s;
}
.bounce-leave-active[data-v-fae5bece] {
  animation: bounce-in-fae5bece 5s reverse;
}
@-webkit-keyframes bounce-in-fae5bece {
{
    transform: scale(0);
}
50%[data-v-fae5bece] {
    transform: scale(1.25);
}
100%[data-v-fae5bece] {
    transform: scale(1);
}
}
@keyframes bounce-in-fae5bece {

0%[data-v-fae5bece] {
    transform: scale(0);
}

50%[data-v-fae5bece] {
    transform: scale(1.25);
}

100%[data-v-fae5bece] {
    transform: scale(1);
}
}

[fangbinwei]

This bug can be solved by pr vuejs/core#3308

[fangbinwei]

Close since this bug is tracked in vue-next repo

[netopolit]

Thanks. You are right despite my badly rushed reproduction code and not noticing it only doesn't work when keyframes are scoped so I didn't suspect an upstream issue.