diff --git a/lib/rules/require-toggle-inside-transition.js b/lib/rules/require-toggle-inside-transition.js
index bdbb5c2dd..fc46f75f9 100644
--- a/lib/rules/require-toggle-inside-transition.js
+++ b/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)
}
})
diff --git a/tests/lib/rules/require-toggle-inside-transition.js b/tests/lib/rules/require-toggle-inside-transition.js
index 0b64daaa3..18a33aa3e 100644
--- a/tests/lib/rules/require-toggle-inside-transition.js
+++ b/tests/lib/rules/require-toggle-inside-transition.js
@@ -57,6 +57,18 @@ tester.run('require-toggle-inside-transition', rule, {
{
filename: 'test.vue',
code: ''
+ },
+ {
+ filename: 'test.vue',
+ code: ''
+ },
+ {
+ filename: 'test.vue',
+ code: ''
+ },
+ {
+ filename: 'test.vue',
+ code: ''
}
],
invalid: [