Vue.jsのtransitionラッパーコンポーネントについてトランジションクラスのスタイルを動的に変更したい

実現したいこと

クリックした座標を取得し、その場所から全画面へ出てくるオーバーレイを作りたいと思っています。
そこで以下のようなHTML、CSS、Vueを記述しましたが、fade-enter, fade-leave-to のスタイルをクリック毎に変更する方法がわかりませんでした。どうすればよいでしょうか。

ソース

html
1<transition name="fade">
2    <div class="overlay" v-show="isDisp">
3        <a @click="isDisp = !isDisp">閉じる</a>
4    </div>
5</transition>

css
1.overlay {
2    position: fixed;
3    top: 0;
4    bottom: 0;
5    right: 0;
6    left: 0;
7    background-color: rgba(0, 0, 0, .7);
8    color: #fff;
9    z-index: 999;
10}
11.fade-enter-active, .fade-leave-active {
12    transition: .5s;
13}
14.fade-enter, .fade-leave-to {
15    /* ↓ここの値を動的に */
16    top: 0;
17    bottom: 0;
18    /* ↑ */
19    opacity: .5;
20    transform: scale(0);
21}

js
1new Vue({
2    el: "#app",
3    data: {
4        isDisp: false,
5    },
6    methods: {
7        click: function(event){
8            this.isDisp = !this.isDisp;
9            console.log(event.clientX);
10            console.log(event.clientY);
11        }
12    }
13})

行動規範の内容に同意します

回答1件

html
1<style>
2.overlay {
3  position: fixed;
4  top: 0;
5  bottom: 0;
6  right: 0;
7  left: 0;
8  background-color: rgba(0, 0, 0, 0.7);
9  color: #fff;
10  z-index: 999;
11}
12.fade-enter-active,
13.fade-leave-active {
14  transition: 0.5s;
15}
16.fade-enter,
17.fade-leave-to {
18  top: 0;
19  bottom: 0;
20  opacity: 0.5;
21  transform: scale(0);
22}
23</style>
24<div id="app">
25  <div>
26    <button @click="toggleDisp">表示</button>
27    <transition
28      name="fade"
29      @leave="leave"
30      @enter="enter"
31    >
32      <div class="overlay" v-show="isDisp">
33        <a @click="toggleDisp">閉じる</a>
34      </div>
35    </transition>
36  </div>
37</div>
38<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
39<script>
40new Vue({
41  el: "#app",
42  data: {
43    isDisp: false
44  },
45  methods: {
46    toggleDisp() {
47      this.isDisp = !this.isDisp
48    },
49    enter(el) {
50      console.log(el)
51    },
52    leave(el) {
53      console.log(el)
54    }
55  }
56});
57</script>