feat(require-toggle-inside-transition): check directive

Author: waynzh

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

@@ -35,7 +35,10 @@ module.exports = {
 
       /** @type VElement */ // @ts-expect-error
       const parent = element.parent
-      if (utils.hasAttribute(parent, 'appear')) {
+      if (
+        utils.hasAttribute(parent, 'appear') ||
+        utils.hasDirective(parent, 'bind', 'appear')
+      ) {
         return
       }
 

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

@@ -68,6 +68,11 @@ tester.run('require-toggle-inside-transition', rule, {
     {
       filename: 'test.vue',
       code: '<template><transition appear><div /></transition></template>'
+    },
+    {
+      // https://github.com/vuejs/eslint-plugin-vue/issues/2467
+      filename: 'test.vue',
+      code: '<template><transition :appear="isLoaded"><div /></transition></template>'
     }
   ],
   invalid: [
@@ -113,6 +118,11 @@ tester.run('require-toggle-inside-transition', rule, {
       filename: 'test.vue',
       code: '<template><Transition>  <div /></Transition></template>',
       errors: [{ messageId: 'expected' }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><transition @appear="isLoaded"><div /></transition></template>',
+      errors: [{ messageId: 'expected' }]
     }
   ]
 })