1、HTML
<template>
<view v-show="isShow" class="animation-class">Hello Uniapp!</view>
</template>
2、CSS
<style>
.animation-class {
animation: fade-in 1s;
}
@keyframes fade-in {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
3、JS
<script>
export default {
data() {
return {
isShow: false
}
},
methods: {
toggleShow() {
this.isShow = !this.isShow;
}
}
}
</script>