music-score/src/page-colexiu/follow-model/index.tsx

import { Transition, defineComponent, onBeforeUnmount, onMounted, ref } from "vue";
import styles from "./index.module.less";
import icons from "./icons.json";
import { handleFollowEnd, handleFollowStart } from "/src/view/follow-practice";

export default defineComponent({
	name: "follow-model",
	setup() {
		const startBtn = ref(false);
		const endBtn = ref(false);
		onMounted(() => {
			startBtn.value = true;
		});
		onBeforeUnmount(() => {
			startBtn.value = false;
		});
		return () => (
			<>
				<Transition name="pop-center">
					{startBtn.value && (
						<div class={styles.startBtn} key="start">
							<img
								src={icons.start}
								onClick={() => {
									startBtn.value = false;
									endBtn.value = true;
									handleFollowStart();
								}}
							/>
						</div>
					)}
				</Transition>
				<Transition name="pop-center">
					{endBtn.value && (
						<div class={styles.endBtn} key="end">
							<img
								src={icons.end}
								onClick={() => {
									startBtn.value = true;
                                    endBtn.value = false;
									handleFollowEnd();
								}}
							/>
						</div>
					)}
				</Transition>
			</>
		);
	},
});