【day 09】vue的过渡与动画

Vue 的过渡与动画

基础的过渡 案例

/*
希望组件节点  离开的时候  有过渡效果

离开的起点
离开的终点

*/

.v-leave{
  /* 离开的起点 */
  transform: translate(0,0);
}

/* 加上  过渡css属性 */
.v-leave-active{
  /* 触发了离开状态   一般是给transition过渡
  只要触发了leave  就会在这里  加上  transition过渡 
   leave结束了  把transition过渡移除
  
  */
  transition:transform 1s;
}

.v-leave-to{
  /* 离开的终点 */
  transform: translate(100%,0);
}


/* 进入时  添加  过渡效果 */
/* 元素将会  从右到左出现 */
.v-enter{
    /* 进入的终点 */
    transform:translate(100%,0)
}

.v-enter-active{
    transition:transform 1s;
}
.v-enter-to{
    /* 进入的终点 */
    transform:translate(0,0)
}

由于进入和离开 起点终点 是逆向的 写成多元素 选择器

/*
希望组件节点  离开的时候  有过渡效果

离开的起点
离开的终点

*/

.v-leave,.v-enter-to{
  /* 离开的起点 */
  transform: translate(0,0);
}

/* 加上  过渡css属性 */
.v-leave-active,.v-enter-active{
  /* 触发了离开状态   一般是给transition过渡
  只要触发了leave  就会在这里  加上  transition过渡 
   leave结束了  把transition过渡移除
  
  */
  transition:transform 1s;
}

.v-leave-to,.v-enter{
  /* 离开的终点 */
  transform: translate(100%,0);
}

当组件中有多个需要过渡的元素 且css不同

  
      //应用上 v-enter的样式  默认 v-
       
    
   
    
       
    
  

  切换bool值

.v-leave,.v-enter-to{
  transform: translate(0,0);
}

.v-leave-active,.v-enter-active{

  transition:transform 1s;
}

.v-leave-to,.v-enter{
  transform: translate(100%,0);
}






.singer-leave,.singer-enter-to{

  transform: translate(0,0);
}

.singer-leave-active,.singer-enter-active{


  transition:transform 1s;
}

.singer-leave-to,.singer-enter{
  transform: translate(0,-400px);
}

App.vue

appear 属性

默认情况下 bool 为true时 song一刷新没有进入动画 加上appear属性即可

   
    <transition appear>
       <Song id="song" v-if="bool"></Song>
    </transition>
  
    <transition appear name="singer">
       <Singer id="singer" v-if="bool"  ></Singer>
    </transition>

dom 一刷新就会 有进入动画

transition-group

如果 多个元素需要 具有独立的过渡 切换

用上 transition-group

<ul>
        <transition-group appear>
          <li v-for="(item, index) in arr" :key="index" @click="fn(index)">
            {{ item.name }} ++++ {{ item.id }}
          </li>
        </transition-group>
      </ul>

注意事项 : 要具有 过渡效果的li 必须要具备 key值 

// 通过 操作 dom依赖的数据  实现 dom的消失  删除arr数组项 li就会触发 过渡效果
// 手动修改 display 不会触发过渡 (display none没有过渡效果) 删除节点也不会触发过渡效果 
data() {
    return {
      bool: true,
      arr: [
        { id: 1000, name: "zhuque" },
        { id: 1001, name: "zhuque" },
        { id: 1002, name: "zhuque" },
        { id: 1003, name: "zhuque" },
        { id: 1004, name: "zhuque" },
      ],
    };
  },
  methods: {
    fn(index) {
      this.arr.splice(index, 1);
    },
  }, 

App.vue