vue 过渡 & 动画

过渡 & 动画

过渡动画

1. 用css先定义好动画效果

.a-enter-active, .a-leave-active {
    transition: all 1.5s;
  }
  .a-enter, .a-leave-to /* .fade-leave-active below version 2.1.8 */ {
    opacity: 0;
    transform: translateX(100px);
  }

2. 把要加动画的内容添加到transition标签中,并写出name属性

 <transition name="a">
        <div v-if="isShow">
          111111111111111111111
        </div>
      </transition>

3. name加载对应的class名字前

例如 name="fade"
所对应的动画class名字为 fade-enter-active
fade-leave-active
fade-enter
fade-leave-to

过渡的类名（官网的解释）

1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

关键帧动画

 .b-enter-active {
    animation: aaa 1.5s;
  }
  .b-leave-active {
    animation: aaa 1.5s reverse;
  } 
  @keyframes aaa {
    0% {
      opacity: 0;
      transform: translateX(100px);
    }

    100% {
      opacity: 1;
      transform: translateX(0px);
    }
  }

结合动画库

https://daneden.github.io/animate.css/

 <transition name="a" enter-active-class="animated " leave-active-class="animated ">
        <div v-if="isShow">
          111111111111111111111
        </div>
      </transition>

多个元素过渡

• 当标签名不同时可以用v-if/v-else

• 当相同标签切换时，要通过key设置

• 同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了过渡模式

  • in-out：新元素先进行过渡，完成之后当前元素过渡离开。
  • out-in：当前元素先进行过渡，完成之后新元素过渡进入。

        <button @click="isShow= !isShow">click</button>
        <transition name="bounce" mode="out-in">
          <!-- <div v-if="isShow"> -->
            <div v-if="isShow" key="1">11111111111</div>
            <div v-else key="2">222222222222</div>

多个组件过渡

只需要动态组件

   <keep-alive>
         <transition name="bounce" mode="out-in">
          <component :is="which"></component>
         </transition>
   </keep-alive>

  <footer>
         <ul>
           <li><a  @click="which='home'" >首页</a></li>
           <li><a  @click="which='list'">列表页</a></li>
           <li><a  @click="which='shopcar'">购物车页面</a></li>
         </ul>
       </footer>

 var vm =  new Vue({
        el:"#box",
        data:{
          which:"home"
        },
        components:{
          "home":{template:`<div>home组件<input type="text"/></div>`},
          "list":{template:`<div>list组件</div>`},
          "shopcar":{template:`<div>shopcar组件</div>`}
        }
      })

多个列表的过渡

使用组件

    <transition-group tag="ul" name="bounce">
            <li v-for="(data,index) in datalist" :key="data">
              {{data}}--{{index}}
              <button @click="handleDelClick(index,$event)">del</button>
            </li>
          
          </transition-group>

  new Vue({
          el:"#box",
          data:{
            mytext:"111",
            datalist:[]
          },
          methods: {
            handleAdd(){
              console.log(this.mytext)
              this.datalist.push(this.mytext)
            },
            handleDelClick(index){
              console.log(index)
              this.datalist.splice(index,1)
            }
          }
        })

什么场景下可以使用动画

• 条件渲染 v-if
• 条件展示 v-show
• 根节点
• 动态组件

总结

• 元素或者组件 进入 离开（页面） 可以触发动画效果

• 在目标元素的外侧用 transition 包裹 ，通过name 属性添加一个名字

• 进入状态

• name-enter 、name-enter-to、 name-enter-active

• 离开状态把enter换成leave

• 多个元素或者组件要用动画 需要使用transtion-group 里面的子元素要添加不同的key值