VUE3.0,DAY54，vue的过渡与动画效果

动画效果

我们使用vue脚手架，创建模板后，新建一个自定义组件Test.vue。代码如下

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <h1 v-show="isShow">你好啊！</h1>
  </div>
</template>
<script>
export default {
  name: "Test",
  data() {
    return {
      isShow: true,
    };
  },
};
</script>
<style scoped>
h1 {
  background-color: coral;
}
</style>

修改App.vue代码如下：

<template>
  <div class="app">
    <Test />
  </div>
</template>

<script>
import Test from "./components/Test.vue";

export default {
  name: "App",
  components: { Test },
};
</script>

然后运行下看看输出页面的效果如下：

随后我们在Test.vue里开始追加代码，完成显示或隐藏时的动画效果。

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>
    <h1 v-show="isShow" class="come">你好啊！</h1>
  </div>
</template>
<script>
export default {
  name: "Test",
  data() {
    return {
      isShow: true,
    };
  },
};
</script>
<style scoped>
h1 {
  background-color: coral;
}
/* 使用动画 */
.come {
  animation: atguigu 1s;
}

.go {
  /* 隐藏消失的时候，动画时间1s，与定义的方向相反 */
  animation: atguigu 1s reverse;
}
/* 定义动画需要加前缀@keyframes，并且自定义动画名字atguigu */
@keyframes atguigu {
  from {
    /* 水平x轴上的改变，-100px表示从最左边出现 */
    transform: translateX(-100px);
  }
  to {
    /* 最后来到0px的地方 */
    transform: translateX(0px);
  }
}
</style>

如果我们想靠vue自动帮我们的文字实现显示和隐藏效果的切换，而不是自己在文字标签上定义显示的true或者false，使用下述代码

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>

    <!-- 想让h1有动画的效果，就用transition把他包裹起来 -->
    <transition>
      <h1 v-show="isShow">你好啊！</h1>
    </transition>
  </div>
</template>
<script>
export default {
  name: "Test",
  data() {
    return {
      isShow: true,
    };
  },
};
</script>
<style scoped>
h1 {
  background-color: coral;
}
/* 使用动画 */
/* vue内置设计的动画出现时的名字 */
.v-enter-active {
  animation: atguigu 1s;
}
/* vue内置设计的动画离开时的名字 */
.v-leave-active {
  /* 隐藏消失的时候，动画时间1s，与定义的方向相反 */
  animation: atguigu 1s reverse;
}
/* 定义动画需要加前缀@keyframes，并且自定义动画名字atguigu */
@keyframes atguigu {
  from {
    /* 水平x轴上的改变，-100px表示从最左边出现 */
    transform: translateX(-100px);
  }
  to {
    /* 最后来到0px的地方 */
    transform: translateX(0px);
  }
}
</style>

注意：如果给transistion标签中加了name="hello"等，我们在使用动画的时候，名字要设定为hello-enter-active和hello-leave-active。如果想动画一开始加载网页的时候就显示，那么需要在transition标签中设置一个:appear=“true”属性或者直接写一个appear即可。

过渡效果

注意其中几个vue内置的名字。过渡用法与动画类似。

<template>
  <div>
    <button @click="isShow = !isShow">显示/隐藏</button>

    <!-- 想让h1有动画的效果，就用transition把他包裹起来 -->
    <transition appear>
      <h1 v-show="isShow">你好啊！</h1>
    </transition>
  </div>
</template>
<script>
export default {
  name: "Test2",
  data() {
    return {
      isShow: true,
    };
  },
};
</script>
<style scoped>
h1 {
  background-color: coral;
  /* 规定过渡效果的时间等设置 */
  transition: 0.5s linear;
}

/* vue内置的名字，意思是进入的起点，写进入起点时的样式 */
.v-enter {
  transform: translateX(-100%);
}
/* vue内置的名字，进入的终点，这时的状态是什么样的 */
.v-enter-to {
  transform: translateX(0);
}
/* vue内置的名字，意思是离开的起点，写离开起点时的样式 */
.v-leave {
  transform: translateX(0);
}
/* vue内置的名字，离开的终点，这时的状态是什么样的 */
.v-leave-to {
  transform: translateX(-100%);
}
</style>