Skip to content

[规则反馈] begin(设置SVG动画animate的begin属性时仅设置了touchstart) 导致SVG动画在PC端无法触发 #10

Description

@Crush1231811

反馈类型

⚙️ 阈值调整 — 某条规则的参数太严或太松

涉及规则

2.7 begin

🔗 方式一:文章链接(推荐)

No response

📋 方式二:粘贴 HTML 代码(≤ 64KB)

<section class="_135editor" data-tplid="157528">
	<section data-role="animate" class="135-hide-delete">
		<section style="user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;" class="" >
			<!-- 长按前 -->
			<svg viewbox="0 0 1080 1920" class="135svg" data-bige="761149" img-title="长按前-封面图" style="background-image: url(https://bcn.135editor.com/files/images/editor_styles/87133c3ac39d46e66585467650451e52.png); background-size: cover; background-repeat: no-repeat;display: inline-block; pointer-events: none; user-select: none; vertical-align: top; width: 100%;max-width:100% !important;box-sizing:border-box;" xml:space="default">
				<g>
					<g transform="translate(2160 0)">
						<foreignobject x="0" y="0" width="1080" height="1920" style="pointer-events: none;">
							<svg viewbox="0 0 1080 1920" class="135svg" data-bige="761148" img-title="最后海报" style="background-image: url(https://bcn.135editor.com/files/images/editor_styles/18a7bd7612e669fdcf3b9f44d4a15e28.png); background-size: cover; background-repeat: no-repeat;display: inline-block; pointer-events: none; user-select: none; vertical-align: top; width: 100%;max-width:100% !important;box-sizing:border-box;" xml:space="default"></svg>
						</foreignobject>
					</g>
					<g>
						<g>
							<g>
								<!-- 长按后gif -->
								<g transform="translate(1080 0)">
									<foreignobject x="0" y="0" width="1080" height="1920" style="pointer-events: none;">
										<svg viewbox="0 0 1080 1920" class="135svg" img-title="长按后GIF图" style="background-image: url(https://bcn.135editor.com/files/images/editor_styles/50b8526cbbea14f24736f8422c8fb1fe.gif); background-size: cover; background-repeat: no-repeat;display: inline-block; pointer-events: none; user-select: none; vertical-align: top; width: 100%;max-width:100% !important;box-sizing:border-box;" xml:space="default"></svg>
									</foreignobject>
								</g>
								<g>
									<g>
										<!-- 长按 -->
										<g>
											<foreignobject x="0" y="0" width="1080" height="1920" style="pointer-events: none;">
												<svg viewbox="0 0 1080 1920" class="135svg" data-bige="761151" img-title="长按文案" style="background-image: url(https://bcn.135editor.com/files/images/editor_styles/592962456a5c77bf7837abdb8f890087.png); background-size: cover; background-repeat: no-repeat;display: inline-block; pointer-events: none; user-select: none; vertical-align: top; width: 100%;max-width:100% !important;box-sizing:border-box;" xml:space="default"></svg>
											</foreignobject>
										</g>
										<rect width="1080" height="1920" x="0" y="0" fill="transparent" opacity="0" style="pointer-events: painted;"></rect>
										<animate class="svg-hide" attributename="opacity" values="1;0.25;1" begin="0" dur="1.05s" fill="freeze" restart="whennotreattive" repeatcount="indefinite"></animate>
									</g>
								</g>
								<animatetransform attributename="transform" type="translate" begin="touchstart" end="touchend" values="0 0;0 0;-1080 0;-1080 0" keytimes="0;0.425;0.4255;1" dur="0.2s" fill="freeze"></animatetransform>
								<animatetransform attributename="transform" type="translate" begin="touchend" values="0 0" dur="0.2s" fill="freeze" repeatcount="1" restart="always"></animatetransform>
							</g>
							<animate attributename="opacity" begin="touchstart" end="touchend" values="1;0;0;1" keytimes="0;0.425;0.4255;1" dur="0.2s" fill="freeze" restart="never"></animate>
							<animate attributename="opacity" begin="click" values="1;0.99;0.99;1" keytimes="0;0.425;0.4255;1" dur="1ms" fill="freeze" restart="never"></animate>
						</g>
					</g>
					<animatetransform additive="sum" attributename="transform" type="translate" begin="touchstart" end="touchend" values="0 0;0 0;-2160 0;-2160 0" keytimes="0;0.425;0.4255;1" dur="5.65s" fill="freeze"></animatetransform>
				</g>
			</svg>
		</section>
	</section>
</section>

问题描述

期望:建议不弹出提示
实际:当svg触发方式是“touchstart”时,会弹出提示

期望行为

这种类型的模版,不应该因为“touchstart”的存在而弹出提示,在实际运用中,部分svg效果(长按、抽签、滑动展开)只需要移动端触发,不需要兼容PC端

检测思路(可选)

No response

提交前确认

  • 我已阅读规范文档,确认此问题未被现有规则覆盖
  • 如提供了文章链接,我确认该链接为永久链接,非预览链接
  • 我理解此 Issue 将由 AI Agent 自动处理,处理结果会在此 Issue 中反馈

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Fields

    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions