vue封装的动画效果与vue封装的过度效果

vue中动画效果

//创建一个Test组件
<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition appear="true">
    //当appear = 'true'与只等价的可以只写一个 appear 效果是一样的
      <h1 v-show="isShow">你好啊！</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

<style scoped>
h1 {
  background-color: #bfa;
}

.v-enter-active {
  animation: atguigu 1s linear;
}

.v-leave-active {
  animation: atguigu 1s reverse linear;
}

@keyframes atguigu {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(100%);
  }
}
</style>

分析：

• 浏览器是不认识transition标签的，也就是在浏览器查看是没有这个标签的，它是vue认识的
• 如果给transition标签配上 name:hello 则样式中如v-enter-active需要改成 hello-enter-active （没名字的时候默认是v）
• 给transition标签配置name的好处就是多个标签在使用的时候可以利用不同的动画效果
• 如果在给某个标签添加一个为真的属性其实保留它的属性名就行

vue中过度效果

• 下面用Test2举例vue中的过渡效果属性

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition :appear="true" name="hello">
      <!-- 当appear = 'true'与只等价的可以只写一个 appear 效果是一样的 -->
      <h1 v-show="isShow">你好啊！</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

<style scoped>
h1 {
  background-color: #bfa;
  /* 可以在h1中设置过度的效果 */
  /* transition: 0.5 linear; */
}
/* 进入的起点、离开的终点 */
.hello-enter,
.hello-leave-to {
  transform: translateX(-100%);
}
/* 设置过度的效果，可以加在这也可以加在h1中 */
.hello-enter-active,
.hello-leave-active {
  transition: 0.5 linear;
}
/* 进入的起点、离开的终点 */
.hello-enter-to,
hello-leave {
  transform: translateX(0);
}
</style>

• 如果是多个过度元素需要用 transition-group

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <transition-group :appear="true" name="hello">
      <!-- 当appear = 'true'与只等价的可以只写一个 appear 效果是一样的 -->
      <h2 v-show="!isShow" key="1">你好啊！</h2>
      <h2 v-show="isShow" key="2">我很好</h2>
    </transition-group>
    <!-- 多个元素过度需要用transition-group
         且每个元素要配置key，key的值必须不同
     -->
  </div>
</template>

<script>
export default {
  name: "Test2",
  data() {
    return {
      isShow: true,
    };
  },
};
</script>

<style scoped>
h2 {
  background-color: #bfa;
  /* 可以在h1中设置过度的效果 */
  /* transition: 0.5 linear; */
}
/* 进入的起点、离开的终点 */
.hello-enter,
.hello-leave-to {
  transform: translateX(-100%);
}
/* 设置过度的效果，可以加在这也可以加在h1中 */
.hello-enter-active,
.hello-leave-active {
  transition: 0.5s linear;
}
/* 进入的起点、离开的终点 */
.hello-enter-to,
hello-leave {
  transform: translateX(0);
}
</style>