【css】11.动画效果transiton（1）

transition: 0.2s left;

这是一个高度为2px，有背景的下划线条的动画效果

.content-line {
    position: absolute;
    left: 0;
    bottom: -12Px;
    height: 2Px;
    background-color: #C54242;
    transition: 0.2s left;
  }

0.2秒的过度效果

.list-item {
    width: calc(calc(100% / 5) - 15Px);
    background-color: #FFF4E7;
    transition: 0.2s background-color;
    margin-right: 20Px;
    cursor: pointer;
    .list-img {
      height: 180Px;
      width: 100%;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }

3实战效果 注意style里面的效果，一般都是切换时候才有过度效果

<template>
  <div class="home">
    <div class="demo" id="demo">color and background</div>
    <button id="color" @click="colorUN">click me toggle color</button>
    <button id="bg" @click="clickBG">click me toggle background-color</button>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {};
  },
  methods: {
    colorUN() {
      const demo = document.querySelector("#demo");
      demo.style.color = `rgb(${parseInt(Math.random() * 256)},${parseInt(
        Math.random() * 256
      )},${parseInt(Math.random() * 256)})`;
      let num = parseInt(Math.random() * 60);
      demo.style.fontSize = `${num}px`;
    },
    clickBG() {
      const demo = document.querySelector("#demo");
      demo.style.backgroundColor = `rgb(${parseInt(
        Math.random() * 256
      )},${parseInt(Math.random() * 256)},${parseInt(Math.random() * 256)})`;
    },
  },
};
</script>
<style lang="scss" scoped>
.demo {
  transition: 1s color, 0.2s background-color,2s font-size;
}
button {
  margin-top: 10px;
}
</style>