vue 动画

三种使用方式：

1.Name使用方式 fade为name自定义名称

• .fade-enter-active 进入时
• .fade-leave-active 离开时
• .fade-enter 进入过渡
• .fade-leave-to 离开过渡

 

<template>
  <div id="tran">
    <input type="button" value="动画" @click="change()" />
    <transition
      name="fade"
    >
      <div class="box" v-show="show"></div>
    </transition>
  </div>
</template>
<script>
export default {
  name: "tran",
  data() {
    return {
      show: false,
      showtwo: false
    };
  },
  methods: {
    change() {
      this.show = !this.show;
    }
  }
};
</script>
<style >
.box {
  width: 200px;
  height: 100px;
  position: absolute;
  left: 50%;
  margin-left: 50px;
  background: black;
}
/* 定义进入和离开时候的过渡状态 */
.fade-enter-active,
.fade-leave-active {
  transition: all 0.2s ease;
  transform: translateX(200px);
}

/* 定义进入过渡的开始状态 和 离开过渡的结束状态 */
.fade-enter,
.fade-leave-to {
  opacity: 0;
  transform: translateX(200px);
}
</style>

2.周期使用方式

• @before-enter 进入之前
• @enter 进入时
• @after-enter 进入后
• @before-leave 离开之前
• @leave 离开中
• @after-leave 离开后

<template>
  <div id="tran">
    <input type="button" value="动画" @click="change()" />
    <transition
      name="fade"
      @before-enter="beforeEnter"
      @enter="before"
      @after-enter="afterenter"
      @before-leave="beforeleave"
      @leave="leave"
      @after-leave="afterleave"
    >
      <div class="box" v-show="show"></div>
    </transition>
  </div>
</template>
<script>
export default {
  name: "tran",
  data() {
    return {
      show: false,
      showtwo: false
    };
  },
  methods: {
    changetwo() {
      this.showtwo = !this.showtwo;
    },
    beforeEnter() {
      alert("进入之前");
    },
    before() {
      alert("进入时");
    },
    afterenter() {
      alert("进入后");
    },
    beforeleave() {
      alert("动画离开前");
    },
    leave() {
      alert("动画离开中");
    },
    afterleave() {
      alert("动画离开后");
    }
  }
};
</script>
<style >
.box {
  width: 200px;
  height: 100px;
  position: absolute;
  left: 50%;
  margin-left: 50px;
  background: black;
}
</style>

3 class

• enter-class
• enter-active-class
• enter-to-class(2.1.8+)
• leave-class
• leave-active-class
• leave-to-class(2.1.8+)

<template>
  <div id="tran">
    <input type="button" value="第二种动画" @click="changetwo()" />
    <transition
      enter-class="fade-in-enter"
      enter-active-class="fade-in-active"
      leave-class="fade-out-enter"
      leave-active-class="fade-out-active"
    >
      <div class="box" v-show="showtwo"></div>
    </transition>
  </div>
</template>
<script>
export default {
  name: "tran",
  data() {
    return {
      show: false,
      showtwo: false
    };
  },
  methods: {
    changetwo() {
      this.showtwo = !this.showtwo;
    },
  }
};
</script>
<style >
.box {
  width: 200px;
  height: 100px;
  position: absolute;
  left: 50%;
  margin-left: 50px;
  background: black;
}
.fade-in-active,
.fade-out-active {
  transition: all 1s ease;
  position: absolute;
}

.fade-in-enter,
.fade-out-active {
  transition: all 1s ease;
  transform: translateX(200px);
}

</style>