【day 09】vue的过渡与动画

Vue 的过渡与动画

基础的过渡 案例

 <!-- 第一步 包一个transition标签 -->
    <transition>
       <Song id="song" v-if="bool"></Song>
    </transition>
  

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

离开的起点
离开的终点

*/

.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不同

  <!-- 第一步 包一个transition标签 -->
    <transition>  //应用上 v-enter的样式  默认 v-
       <Song id="song" v-if="bool"></Song>
    </transition>
   <!-- singer-enter  把v替换成  name值 -->
    <transition name="singer">
       <Singer id="singer" v-if="bool"></Singer>
    </transition>
  

  <button @click="bool = !bool">切换bool值</button>

.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

<template>
  <div id="app">
    <!-- 第一步 包一个transition标签 -->
    <transition>
       <Song id="song" v-if="bool"></Song>
    </transition>
  
    <transition name="singer">
       <Singer id="singer" v-if="bool"></Singer>
    </transition>
  

  <button @click="bool = !bool">切换bool值</button>
  </div>
</template>

<script>
import Song from "./components/Song";
import Singer from "./components/Singer";
export default{
  name:"App",
  components:{
    Song,
    Singer,
  },
  data(){
    return{
       bool:true
    }
 
  },
 

}

</script>

<style>
#song{
  /* float:left;  */
  width:100%;
  background-color: yellow;

}
#singer{
  float:left;
  width: 200px;
  background-color: skyblue;
}
.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);
}


</style>

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

<template>
  <div id="app">
    <!-- 第一步 包一个transition标签  -->
    <!-- <transition appear>
      <Song id="song" v-if="bool"></Song>
    </transition>

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

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

    <button @click="bool = !bool">切换bool值</button>
  </div>
</template>

<script>
import Song from "./components/Song";
import Singer from "./components/Singer";

export default {
  name: "App",
  components: {
    Song,
    Singer,
  },
  data() {
    return {
      bool: true,
      arr: [
        { id: 1000, name: "zz" },
        { id: 1001, name: "xx" },
        { id: 1002, name: "cc" },
        { id: 1003, name: "vv" },
        { id: 1004, name: "bb" },
      ],
    };
  },
  methods: {
    fn(index) {
      this.arr.splice(index, 1);
    },
  },
};
</script>
<style>
#song {
  background-color: yellow;
}
#singer {
  background-color: skyblue;
}
li {
  height: 40px;
  background-color: pink;
  border-bottom: 1px solid #000;
}
.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-to,
.singer-enter {
  transform: translate(0, -325px);
}

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

.singer-leave-active,
.singer-enter-active {
  transition: transform, 1s;
}
</style>