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

Co-authored-by: williamc <williamc@synology.com>

Author: DevilTea

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: [