Vue ＜style＞使用变量 css使用变量

首先在<template>给标签赋值 :style

<div :style="cssVar" />

<script>中定义刚才赋值的变量

 computed:{
   cssVar( { left, top } ){
     let _site = {
       '--left': 10,
       '--top': 20,
     }
     return _site
   },  
 },

最后在 <style> 中使用即可

@keyframes scale-out-tr {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: 100% 0%;
            transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0);
            transform: scale(0);
    -webkit-transform-origin: var(--left) var(--top);
            transform-origin: var(--left) var(--top);
    opacity: 1;
  }
}