vue2 脚手架组件使用动画

vue 过渡的简单使用

将我们想要使用动画的那一块内容用transition包裹起来,然后在style里面添加样式,当然我们需要添加单击事件，自定义一个属性来控制盒子的显示与隐藏，在添加动画来修饰他的显示与隐藏。如下

<template>
  <div>
    <div @click="showbox" style="border: 1px black solid; width: 50px">
      <span v-if="isture">隐藏</span>
      <span v-else>显示</span>
    </div>
    <transition>
      <div
        v-if="isture"
        style="width: 100px; height: 100px; background-color: orange"
      ></div>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isture: false,
    };
  },
  methods: {
    showbox() {
      this.isture = !this.isture;
    },
  },
};
</script>
<style lang="less" scoped>
.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 1.5s;
}
</style>

vue 的动画使用

动画的使用我们可能要添加的那一版内容可能不止一种，这是需要给我们的transition添加一个name属性来指定他包裹内容的动画效果的名字。如下

<template>
  <div>
    <div @click="showbox" style="border: 1px black solid; width: 50px">
      <span v-if="isture">隐藏</span>
      <span v-else>显示</span>
    </div>
    <transition name="box1">
      <div
        v-if="isture"
        style="width: 100px; height: 100px; background-color: orange"
      ></div>
    </transition>
    <transition name="box2">
      <div
        v-if="isture"
        style="width: 100px; height: 100px; background-color: green; margin-top: 20px"
      ></div>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isture: false,
    };
  },
  methods: {
    showbox() {
      this.isture = !this.isture;
    },
  },
};
</script>
<style lang="less" scoped>
.box1-enter,
.box1-leave-to {
  opacity: 0;
  transform: rotate(360deg);
}
.box1-enter-active,
.box1-leave-active{
    transition:all  1.5s;
}
.box2-enter,
.box2-leave-to {
  opacity: 0;
  transform: rotate(720deg);
}
.box2-enter-active,
.box2-leave-active{
    transition:all  1s;
}
</style>

vue动画库使用

当我们没有动画库时，我们需要自定义一个动画效果，再让他运用，如下

<template>
  <div>
    <div @click="showbox" style="border: 1px black solid; width: 50px">
      <span v-if="isture">隐藏</span>
      <span v-else>显示</span>
    </div>
    <transition name="box1">
      <div
        v-if="isture"
        style="width: 100px; height: 100px; background-color: orange"
      ></div>
    </transition>
  </div>
</template>
<script>
export default {
  data() {
    return {
      isture: false,
    };
  },
  methods: {
    showbox() {
      this.isture = !this.isture;
    },
  },
};
</script>
<style lang="less" scoped>
.box1-enter-active {
  animation: rotate 1s;
}
.box1-leave-active {
  animation: rotate 1s reverse;
}
@keyframes rotate {
  0% {
    opacity: 0;
    transform: rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: rotate(360deg);
  }
}
</style>

当我们不想自己定义动画时，我们可以使用动画库，这里以animate.css做例子,官网地址:动画.css |CSS 动画的跨浏览器库。 (animate.style)

首先我们需要安装，在终端运行

 npm install animate.css --save

在index.js 或者main.js里面来导入

import 'animate.css'

复制我们需要的动画效果

 同样是上面自定义动画操作

这是这次将我们自己定义的动画名称换成咱们复制的名称

<style lang="less" scoped>
.box1-enter-active {
  animation: zoomIn 1s;
}
.box1-leave-active {
  animation: zoomOut 1s;
}

</style>

复制过来时是这样的：animate__zoomIn，去掉前面的animate__即可。

vue 自定义过渡类名

这时候我们可以直接在行内里面直接设置样式不需要在css里面来操作了。同样是以上面的animated.css动画库为例。

<transition
    enter-active-class='animate__animated animate__zoomIn'
    leave-active-class='animate__animated animate__zoomOut'
    >
      <div
        v-if="isture"
        style="width: 100px; height: 100px; background-color: orange"
      ></div>
    </transition>

需要注意的是这次复制的动画效果不需要删除后缀全部添加即可。而且前面需要再添加一段内容

animate__animated来让动画效果成功运行。

添加自定义时间

.animate__animated.animate__zoomIn {
  --animate-duration: 4s;
}
.animate__animated.animate__zoomOut {
  --animate-duration: 4s;
}