Vue's animated transition doesn't work.

< script src= ".. / vue.js" > < / script >

<title>Document</title>
<style>
    .fade-enter{
        opacity: 1;
    }
    .fade-enter-active{
        transition: opacity 3s;
    }
</style>

< / head >
< body >

<div id="app">
    <transition name="fade">
        <div v-show="show">hello world</div>
    </transition>
    
    <button @click="handclick">change</button>
</div>
transition

there won't be any animation if the opacity is 1, and the click event controls the changes in show. Have you written

?
Menu