実現したいこと
クリックした座標を取得し、その場所から全画面へ出てくるオーバーレイを作りたいと思っています。
そこで以下のような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})
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。