Vue.js使用keyframes动画

<!DOCTYPE html><html><head><meta charset="utf-8"><title>Vue中css动画的原理</title><script src="./node_modules/vue/dist/vue.js"></script><st...

曾皙

6004人浏览 · 2018-11-18 21:46:42

曾皙 · 2018-11-18 21:46:42 发布

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Vue中css动画的原理</title>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <style>
    @keyframes bounce {
      0% {
        transform: scale(0);
      }

      50% {
        transform: scale(1.5);
      }

      100% {
        transform: scale(1);
      }
    }

    /* .fade-enter-active和.fade-leave-active代表一直都在的那个时间点 */
    .fade-enter-active {
      transform-origin: left center;
      /* 这里写这个因为div太宽了 */
      animation: bounce 1s;
    }

    .fade-leave-active {
      transform-origin: left center;
      animation: bounce 1s reverse;
    }
  </style>
</head>

<body>
  <div id="root">
    <transition name="fade">
      <div v-if="show">hello world</div>
    </transition>
    <button @click="click">切换</button>
  </div>
  <script>
    var root = new Vue({
      el: '#root',
      data: {
        show: true
      },
      methods: {
        click: function () {
          this.show = !this.show;
        }
      }
    })
  </script>

</body>

</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^