svg-pop-layer

    <svg viewBox="0 0 300 300" version="1.1">
      <g>
        <rect
          x={0}
          y={0}
          width={20}
          height={20}
          fill="red"
          id="show"
          pointerEvents={'visible'}
        />

        <g transform="translate(300 0)">
          <animate
            attributeName="opacity"
            begin="show.touchstart"
            dur="0.3s"
            from="0"
            to="1"
            fill="freeze"
          />
          <animateTransform
            attributeName="transform"
            type="translate"
            dur={`${0.01}s`}
            to="0 0"
            begin="show.touchstart"
            fill="freeze"
          />
          <animate
            attributeName="opacity"
            begin="hide.touchstart"
            dur="0.3s"
            from="1"
            to="0"
            id="fadeOut"
          />
          <animateTransform
            attributeName="transform"
            type="translate"
            from="300 0"
            to="300 0"
            begin="fadeOut.end"
            fill="freeze"
          />
          <foreignObject height="100%" width="100%" x="0" y="0">
            <svg
              style={{
                overflow: 'hidden',
                backgroundSize: '100%',
                backgroundRepeat: 'no-repeat',
                backgroundImage: `url("https://picsum.photos/200/300")`,
                pointerEvents: 'none',
              }}
              viewBox="0 0 751 1335"
            ></svg>
          </foreignObject>
          <rect
            x={280}
            y={0}
            width={20}
            height={20}
            fill="blue"
            id="hide"
            pointerEvents={'visible'}
          ></rect>
        </g>
      </g>
    </svg>

svg poplayer effect for mp.weixin platform.

Principle

1. g layer and transform out of viewport.
2. use animate to transform in when trigger click.
3. begin="fadeOut.end" can chain the animations