animation--VUE&& CSS

常用操作一--------name定义

• 动画过度的类名：
  

1. v-enter
   
2. v-enter-active
   
3. v-enter-to
   
4. v-leave
   
5. v-leave-active
   
6. v-leave-to

<div id="demo">
  <button v-on:click="show = !show">
    Toggle
  </button>
  <transition name="fade">                      //知识点1:name动画命名 2标志位transition
    <p v-if="show">hello</p>
  </transition>
</div>
new Vue({
  el: '#demo',
  data: {
    show: true
  }
})
.fade-enter-active, .fade-leave-active {        //知识点:fade-*****, 设置动画时机和属性     
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to {                   //知识点:fade-*****, 设置动画时机和属性
  opacity: 0;
}

常用操作二--------钩子函数

• javascript钩子函数

在属性中声明

<transition
  v-on:before-enter="beforeEnter"          
  v-on:enter="enter"
  v-on:after-enter="afterEnter"
  v-on:enter-cancelled="enterCancelled"
  v-on:before-leave="beforeLeave"
  v-on:leave="leave"
  v-on:after-leave="afterLeave"
  v-on:leave-cancelled="leaveCancelled"
>
</transition>

methods: {
  beforeEnter: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  enter: function (el, done) {
    // ...
    done()                          //done必须的
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },
  beforeLeave: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  leave: function (el, done) {
    // ...
    done()                          //done必须的
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

常用操作三---mode定义动画

<transition name="fade" mode="out-in">
</transition>

常用操作四---组件动画

<transition-group name="flip-list" tag="ul">                     //组件动画
    <li v-for="item in items" v-bind:key="item">
      {{ item }}
    </li>
</transition-group>

.flip-list-move {
  transition: transform 1s;
}

.container{
    width:100px
    transition： width 1s               //transition属性 scale transform 
}
.container:hover{
    width:800px
}

transform: rotate  translate scale      
transition： width 1s

animation: run 1s
//animation-direction:reverse
//animation-fill-mode:forwards          //保持动画位置  backward原始处
//animation-iteration-count:infinite
//animation-play-state:paused;
//time-function:step(1)                 //事件跟进度的关系

@keyframes run{
    0%{
        width:100px
    }
    20%{
        width:500px
    }
    100%{
        width:800px
    }
}

flex布局 

控制里面元素水平、垂直方向都居中

display:flex;
justify-content:center                       //横轴方向上的对齐方式
align-items:center                           //纵轴方向上的对齐方式