vue中动画关键帧keyframes 和 animation 和animate动画库

（1） <style>@keyframes fontScale {0% {font-size: 30px;}100% {font-size: 50px;}}.fade-leave-active {animation: fontScale 3s...

叨唠

2802人浏览 · 2018-11-20 17:46:31

叨唠 · 2018-11-20 17:46:31 发布

（1）

  <style>
    @keyframes fontScale {
      0% {
        font-size: 30px;
      }
      100% {
        font-size: 50px;
      }
    }
    .fade-leave-active {
      animation: fontScale 3s
    }
    .fade-enter-active {
      animation: fontScale 3s
    }
    
  
  </style>
</head>

<body>
  <div id="demo">
    <button @click="show = !show">click me</button>
    <transition name="fade">
      <div v-if="show" class="de">sfsf</div>
    </transition>
  </div>
  <script>
    new Vue({
      el: '#demo',
      data: {
        show: true
      }
    })
  </script>
</body>

特点：transition name 包裹显示隐藏的标签，样式中：@keyframes定义动画的名字和开始到结束的样式，name-enter-active和name-enter-active使用animation动画，设置时间、reverse等值。

（2）name-enter-active 和name-leave-active 是系统添加的，可以自己设置这两个类的名字

  <style>
    .de {
      height: 100px;
      width: 100px;
      background: red;
    }
    @keyframes fontScale {
      0% {
        height: 30px;
      }
      100% {
        height: 50px;
      }
    }
    .leave {
      animation: fontScale 3s
    }
    .enter {
      animation: fontScale 3s reverse;
    }
    
  
  </style>
</head>

<body>
  <div id="demo">
    <button @click="show = !show">click me</button>
    <transition name="fade" enter-active-class="enter" leave-active-class="leave">
      <div v-if="show" class="de">sfsf</div>
    </transition>
  </div>
  <script>
    new Vue({
      el: '#demo',
      data: {
        show: true
      }
    })
  </script>
</body>

（3）这样就可以使用animation库

<body>
  <div id="demo">
    <button @click="show = !show">click me</button>
    <transition name="fade" 
                enter-active-class="animated swing"
                leave-active-class="animated shake">
      <div v-if="show" class="de">sfsf</div>
    </transition>
  </div>
  <script>
    new Vue({
      el: '#demo',
      data: {
        show: true
      }
    })
  </script>
</body>

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}$/, //不连续的两位字母// /^