使用documentElement.classList.add()给元素添加动画或样式

1、代码

<template>
  <div class="main" @click="test">
    <div id="animateDiv" class="normal"></div>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {};
  },
  methods: {
    test() {
      let animateDiv = document.getElementById('animateDiv')
      animateDiv.classList.add('animate')
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.main {
  height: 400px;
  width: 400px;
  padding: 10px;
  border: 2px solid silver;
}
.normal {
  height: 200px;
  width: 200px;
  background: lightcoral;
  transition: 1s;
}

.animate {
  height: 100%;
  width: 100%;
  background: silver;
}
</style>

2、前后效果图