vue_自定义动画_使用animate.css库 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/animate.css/3.7.2/animate.min.css">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style type="text/css">
    /*自定义动画*/
    /*@keyframes boom_in {
      0% {
        transform: scale(0);
      }
      50% {
        transform: scale(1.5);
      }
      100% {
        transform: scale(1);
      }
    }
    .v-enter-active {
      transform-origin: left center;
      animation: boom_in 1s;
    }
    .v-leave-active {
      transform-origin: left center;
      animation: boom_in 1s reverse;
    }*/

    /*---自定义过渡动画(.v-enter-active/.v-leave-active)名字----*/

    /*自定义过渡动画class的名字 transition标签用enter-active-class指定
    .custom-enter-classname {
      transform-origin: left center;
      animation: boom_in 10s;
    }
    自定义过渡动画class的名字 transition标签用leave-active-class指定
    .custom-leave-classname {
      transform-origin: left center;
      animation: boom_in 10s reverse;
    }*/
  </style>
</head>
<body>
  <div id="app">
    <h3>自定义过渡动画，使用animate.css库</h3>
    <!-- 自定义过渡动画class的名字 -->
    <!-- <transition 
           enter-active-class="custom-enter-classname"
           leave-active-class="custom-leave-classname"
         > 
    -->
    
    <!-- 自定义动画名字使用animate.css库 先下载animated.css -->
    <!-- 插入和离开过渡动画都添加animated样式，然后根据不同需求添加不同的动画效果 -->
    <transition 
      enter-active-class="animated swing" 
      leave-active-class="animated shake"
    >
      <h2 v-if="show">hello world</h2>
    </transition>
    <button @click="handleClick">切换</button>
  </div>
</body>
<script type="text/javascript">

  let vm = new Vue({
    el: '#app',
    data: {
      show: true
    },
    methods: {
      handleClick () {
        this.show = !this.show
      }
    }
  })
</script>
</html>

 

posted @ 2020-03-06 17:08  前端之旅  阅读(833)  评论(0)    收藏  举报