Vue CSS3或者npmjs网站中的animate.css实现动画效果

cartoonvue.vue(CSS3)支持一个动画

    <!--动画效果图 利用CSS3动画属性实现-->
    <template>
        <div>
           <h2>动画效果 come and go</h2>
           <button @click="isShow = !isShow">显示/隐藏</button>
           <!-- <transition name = "hello"> 则 v-enter-active改成hello-enter-active 如果不改则会显示图像没有动画效果-->
            <!-- <transition :appear = "true" 则点击浏览器刷新就开始从左往右自动出现> 不加刷新浏览器直接显示图像，因为开始isShow=true-->
           <transition :appear = "true">
              <h1 v-show="isShow">你好啊，悦悦小朋友，小胖妞！，每天200ml奶，早上尿一大包，喜欢吃手机屏幕</h1>
           </transition>
        </div>
    </template>

      <!--组件数据交互-->
      <script>
        export default {
              name:'cartoonvue',
              data(){
                  return{
                    isShow:true
                  }
              }
          }
      </script>

      <!--组件样式   linear:匀速的  nametest:名字上下要一致-->
      <style scoped>
        h1{
          background-color: red;
        }

        .v-enter-active{
            animation: nametest 5s linear
        }

        .v-leave-active{
            animation: nametest 5s linear reverse
        }


        @keyframes nametest {
            from {
                transform: translateX(-1000px);
            }
            to  {
                transform: translateX(0px);
            }
        }
      </style>

cartoonvue2.vue(CSS3)进阶版 多了个transition-group 支持多个动画

    <!--动画效果图 利用CSS3动画属性实现 进步版本-->
    <template>
        <div>
           <h2>动画效果2 come and go</h2>
           <button @click="isShow = !isShow">显示/隐藏</button>
           <!-- <transition name = "hello"> 则 v-enter-active改成hello-enter-active 如果不改则会显示图像没有动画效果-->
            <!-- <transition :appear = "true" 则点击浏览器刷新就开始从左往右自动出现> 不加刷新浏览器直接显示图像，因为开始isShow=true-->
           <transition name = "hello"  :appear = "true">
              <h1 v-show="isShow">进步版：你好啊，悦悦小朋友，小胖妞！，每天200ml奶，早上尿一大包，喜欢吃手机屏幕</h1>
           </transition>

           <!-- 如果是transition里面有多个<h1>则直接用<transition-group></transition-group> 替换 <transition></transition> 但是里面得申明一个key 具体值随便写只要不同就行-->
            <transition-group name = "hello"  :appear = "true">
              <h1 v-show="isShow" key="1">进步版1：你好啊，悦悦小朋友，小胖妞！，每天200ml奶，早上尿一大包，喜欢吃手机屏幕</h1>
              <h1 v-show="isShow" key="2">进步版2：你好啊，悦悦小朋友，小胖妞！，每天200ml奶，早上尿一大包，喜欢吃手机屏幕</h1>
            </transition-group>
        </div>
    </template>

      <!--组件数据交互-->
      <script>
        export default {
              name:'cartoonvue2',
              data(){
                  return{
                    isShow:true
                  }
              }
          }
      </script>


      <!--组件样式   linear:匀速的  nametest:名字上下要一致-->
      <style scoped>
        h1{
          background-color: red;
          /*
          transition: 0.5s linear;
          */
        }

        /**
        动画的类名分为6个

　　入场动画

　　　　<name>-enter      　　　　入场前

　　　　<name>-enter-active　　  入场持续的过程

　　　　<name>-enter-to　　　　入场后

　　出场动画

　　　　<name>-leave　　　　　　出场前
　　　　<name>-leave-active　　　出场持续的过程
　　　　<name>-leave-to　　　　  出场后
        */
        .hello-enter{
            /**
            -100% 这用 % 不要用 px
             */
            transform: translateX(-100%);
        }

        /**.hello-enter 和  hello-enter-to 可以合并，离开的起点就是入场的终点所以可以写成：

        .hello-leave,.hello-enter-to{
           transform: translateX(0);
        }

        */
        .hello-leave{
            transform: translateX(0);
        }

        .hello-enter-to{
            transform: translateX(0);
        }

        .hello-leave-to{
            transform: translateX(-100%);
        }

        /** transition: 0.5s linear; 这个 h1{} 里面了可以 这样可以写*/
        .hello-enter-active,.hello-leave-active{
            transition: 0.5s linear;
        }
      </style>

cartoonvue3.vue 利用第三方动画来做：

https://www.npmjs.com/ 中搜索 animate.css

代码：

<!--利用第三方动画来做
  地址：https://www.npmjs.com/ 中搜索 animate.css
-->
    <template>
        <div>
           <h2>动画效果3 come and go</h2>
           <button @click="isShow = !isShow">显示/隐藏</button>
           <!-- <transition :appear = "true" 则点击浏览器刷新就开始从左往右自动出现> 不加刷新浏览器直接显示图像，因为开始isShow=true-->
           <!--animate__animated animate__bounce 这个是不能动的，enter-active-class和leave-active-class中值可以选择在上面链接中选择-->
            <transition  name = "animate__animated animate__bounce"
              :appear = "true"
              enter-active-class="animate__swing"
              leave-active-class="animate__backOutRight">
              <h1 v-show="isShow">进步版：你好啊，悦悦小朋友，小胖妞！，每天200ml奶，早上尿一大包，喜欢吃手机屏幕</h1>
           </transition>

           <!-- 如果是transition里面有多个<h1>则直接用<transition-group></transition-group> 替换 <transition></transition> 但是里面得申明一个key 具体值随便写只要不同就行-->
            <transition-group
               name = "animate__animated animate__bounce"
              :appear = "true"
              enter-active-class="animate__backInDown"
              leave-active-class="animate__backOutDown"
              >
              <h1 v-show="isShow" key="1">进步版1：你好啊，悦悦小朋友，小胖妞！，每天200ml奶，早上尿一大包，喜欢吃手机屏幕</h1>
              <h1 v-show="isShow" key="2">进步版2：你好啊，悦悦小朋友，小胖妞！，每天200ml奶，早上尿一大包，喜欢吃手机屏幕</h1>
            </transition-group>
        </div>
    </template>

      <!--组件数据交互-->
      <script>
        /**
         * animate.css 这是一个库所以没有 from
         */
        import 'animate.css'

        export default {
              name:'cartoonvue3',
              data(){
                  return{
                    isShow:true
                  }
              }
          }
      </script>


      <style scoped>
        h1{
          background-color: red;
        }
      </style>

以上为具体代码，只要在App.vue中注册就行，具体解释在代码中有注释
具体代码参考 gitee vuedemo2
实际应用参考 gitee vuedemo