利用触发时间差实现「双重触发」 clik
的触发有0.02-0.03秒的延迟,而 touchstart
是点击就触发,利用这个时间差就可以实现双重触发
参考代码
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 800 1000" enable-background="new 0 0 800 1000" xml:space="preserve">
<g id="底层">
<animate attributename="opacity" begin="click" values="1;0;1" repeatcount="indefinite" fill="freeze" dur="2s"></animate>
<rect x="241.5" y="21.9" fill="#46AFFD" width="540.6" height="379.1"></rect>
</g>
<g id="顶层">
<animatetransform attributename="transform" type="translate" values="0 0;-245 0" dur="0.01s" begin="touchstart" fill="freeze" ></animateTransform>
<rect x="24" y="85.1" fill="#59C2A6" width="450.2" height="252.6"></rect>
</g>
</svg>