Fix require-toggle-inside-transition should respect "<slot>", "v-bind:key", attribute "appear"

lib/rules/require-toggle-inside-transition.js

@@ -32,9 +32,18 @@ module.exports = {
  if (utils.isCustomComponent(element)) {
  return
  }
+
+ /** @type VElement */ // @ts-expect-error
+ const parent = element.parent
+ if (utils.hasAttribute(parent, 'appear')) {
+ return
+ }
+
  if (
+ element.name !== 'slot' &&
  !utils.hasDirective(element, 'if') &&
- !utils.hasDirective(element, 'show')
+ !utils.hasDirective(element, 'show') &&
+ !utils.hasDirective(element, 'bind', 'key')
  ) {
  context.report({
  node: element.startTag,
@@ -51,6 +60,7 @@ module.exports = {
  if (child !== node) {
  return
  }
+
  verifyInsideElement(node)
  }
  })

tests/lib/rules/require-toggle-inside-transition.js

@@ -57,6 +57,18 @@ tester.run('require-toggle-inside-transition', rule, {
  {
  filename: 'test.vue',
  code: '<template><transition><template v-if="show"><div /></template></transition></template>'
+ },
+ {
+ filename: 'test.vue',
+ code: '<template><transition><slot /></transition></template>'
+ },
+ {
+ filename: 'test.vue',
+ code: '<template><transition><div :key="k" /></transition></template>'
+ },
+ {
+ filename: 'test.vue',
+ code: '<template><transition appear><div /></transition></template>'
  }
  ],
  invalid: [