〖Vue〗小知识-Vue动画内置封装组件

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前文我们学习 Vuex 的相关内容, 这只是基础, 还需要我们多加练习使用.本文就来学习一下 Vue 的动画. Vue的封装组件 Transition:

Vue 为我们提供了 内置动画封装组件 <transition>

1. 建立文件夹 test_transition'

   mkdir test_transition
   cd test_transition
   

2. vue init webpack

3. cnpm i vuex --save

4. cnpm i axios --save

5. cnpm i node-sass sass-loader --save-dev

注: static 文件夹放置任何静态文件, 最后不打包

6. 在 src 文件夹中建立 style 文件夹, 建文件 reset.scss(重置样式)

7. 在 style 中添加 lang=”scss”

   @import "../style/reset.scss";
   

8. 在 index.html 中引入 <link rel="stylesheet" href="/static/animate.css">

演示页面:

新建一个页面 test_transition.vue, 写入如下代码, 用于演示动画效果:

<template>
  <div class="hello-transition">
    <div class="test-animation1">
      <button @click="flag=!flag">按钮</button>
      <transition
        name="v"
        enter-active-class="animated bounceInDown"
        leave-active-class="animated rubberBand"
      >
        <div class="test" v-show="flag">
          <p>content-wrap,<br />从梦中醒来,<br />有你身边</p>
          <p>《红处方》 《与神对话》</p>
        </div>
      </transition>
    </div>

    <div class="test-animation2">
      <button @click="flag2=!flag2">点击</button>
      <transition
        name="v"
        enter-active-class="animated bounceInLeft"
        leave-active-class="animated bounceOut"
      >
        <div class="test" v-show="flag2">两个动画的名都叫v 可以生效 难道要每个</div>
      </transition>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'HelloTransition',
    data() {
      return {
        flag: true,
        flag2: true,
      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
  @import '../style/reset.scss';
  $r: white;
  $c: orangered;
  .hello {
    width: 210px;
    padding: 21px;
    text-align: center;
  }
  .test {
    width: 210px;
    height: 145px;
    padding-top: 50px;
    border-radius: 50%;
    background: $c;
    color: $r;
    text-align: center;
  }
  // .v-enter,.v-leave-to{
  //   transform: translateX(-100%);
  // }
  // .v-enter-active,.v-leave-active{
  //   transition: all 500ms;
  // }
  // // .v-enter-to,.v-leave{
  // //   transform: translateX(0%);
  // // }
</style>

参考 官方文档

• Vue 官方文档: cn.vuejs.org/zh/
• Vue-文档-动画: cn.vuejs.org/v2/guide/tr…