<template>
<div>
<transition>
<img :src="imageUrl" class="image" />
</transition>
</div>
</template>
<script>
import imageUrl from "../assets/backmr.png";
export default {
data() {
return {
imageUrl,
};
},
methods: {},
};
</script>
<style>
.image {
width: 200px;
height: 200px;
animation: image-animation 3s forwards;
transform-origin: center;
}
@keyframes image-animation {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
</style>
<template>
<div>
<button @click="showImage">显示图片</button>
<transition name="image-animation">
<div v-if="showImageFlag" class="image-container1">
<img class="image" :src="imageUrl" />
</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
showImageFlag: false,
imageUrl:require("../assets/yes.png"),
};
},
methods: {
showImage() {
this.showImageFlag = true;
setTimeout(() => {
this.showImageFlag = false;
}, 4000); // 设置定时器，3秒后将 showImage 设置为 false
},
},
};
</script>
<style>
.image-container1 {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
.image {
width: 200px;
height: 200px;
animation: image-animation 3s forwards;
transform-origin: center;
}
@keyframes image-animation {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
</style>
