Vueのtransitionでv-leaveの設定と動作がわかりません。

前提・実現したいこと

Vue(Nuxt)を使ってtransitionを使ったアニメーションを勉強しようとしています。
非常に基本的なソースコードを作って挙動を調べています。

<p>タグで囲まれた”表示”という文字をtranslate移動を使ってボタンを押したら動いて消えて、もう一度ボタンを押すと現れる動作を考えています。

公式ページや色々なホームページの記事を見てもよくわからない挙動があります。
enterについては
.transit-enter で初期表示を設定して、
.transit-enter-active　でtransitionの時間を設定して
.transit-enter-toで最後の位置を設定して思い通りの挙動ができています。

leaveについて
.transit-leave で初期表示を設定して、
.transit-leave-active　でtransitionの時間を設定して
.transit-leave-toで最後の位置を設定し良洋としています。
しかし最初の.transit-leaveで記載した挙動が反映されません。

該当のソースコード

Nuxt
1<template>
2<div>
3   <button @click="doAction">Animation</button>
4  <transition name="transit">
5    <div v-if="isA" class="koro">
6    <p>表示</p>
7    </div>
8  </transition>  
9</div>
10</template>
11
12<script>
13export default {
14  data: function(){
15    return{
16    isA: true   
17    };
18  },
19  methods:{
20    doAction:function(){
21        this.isA=!this.isA;
22        console.log(this.isA);
23    },
24  },
25  }
26</script>
27<style>
28
29.transit-enter {
30  opacity: 0;
31   transform: translateX(100px) translateY(100px) rotate(90deg);
32}
33
34.transit-enter-active
35{
36  transition:2s;
37 opacity:0;
38}
39.transit-enter-to
40{
41 opacity:1;
42 transform: translateX(0x) translateY(0px);
43}
44
45.transit-leave
46{
47}
48
49.transit-leave-active
50{
51  transition:2s;
52
53}
54
55.transit-leave-to
56{
57 transform: translateX(100px) translateY(100px) rotate(180deg); 
58 opacity:0;
59}
60</style>

試したこと

.transit-leave{ }の中に transform: translateX(0x) translateY(0px);
などを入れて初期の位置を移動させてからtransitionをさせようとしましたが、
全く内容が反映されません。
この設定は無視されてしまう物なのでしょうか？
そもそも表示されている物をフェードアウトさせていくためにleaveを使われるので
初期は元々の表示から変えられないのでしょうか？
公式ページや色々なホームページに書いていただいている説明を読んでもそういった事が
書かれていないので不思議に思っています。
それとも使い方に間違いがあるのでしょうか？