Vue动画

目录

一：动画效果代码

二：Vue自动执行动画

三：动态代码第三方库

 四：在ToolList中最好往Item中添加动画

---

一：动画效果代码

<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: orange;
}
.come {
  animation: rby 1s;
}
.go {
  animation: rby 1s reverse;
}
@keyframes rby {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

二：Vue自动执行动画

1.动画

@keyframes rby {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}

2.两个样式的类名

.v-enter-active {
  animation: rby 1s;
}
.v-leave-active {
  animation: rby 1s reverse;
}

3.transition包过想要执行的动画语句

    <transition>
      <h1 v-show="isshow">你好啊！</h1>
    </transition>

给动画命名，下面的.v-leave-active换成.hello-leave-enter

例子：

<template>
  <div>
    <button @click="isshow = !isshow">显示/隐藏</button>
    <transition>
      <h1 v-show="isshow">你好啊！</h1>
    </transition>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      isshow: true,
    };
  },
};
</script>
<style scoped>
h1 {
  background-color: orange;
}
.v-enter-active {
  animation: rby 1s;
}
.v-leave-active {
  animation: rby 1s reverse;
}
@keyframes rby {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0px);
  }
}
</style>

transition-group的使用

<template>
  <div>
    <button @click="isshow = !isshow" appear>显示/隐藏</button>
    <transition-group name="hello" appear>
      <h1 v-show="!isshow" key="1">你好啊！</h1>
      <h1 v-show="isshow" key="2">尚硅谷！</h1>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: "Test",
  data() {
    return {
      isshow: true,
    };
  },
};
</script>
<style scoped>
h1 {
  background-color: aquamarine;
  /* transition: 0.5s; */
}
.hello-enter-active,
.hello-leave-active {
  transition: 0.5s;
}
/* 进入的起点 */
.hello-enter,
.hello-leave-to {
  transform: translateX(-100%);
}
/* 进入的终点 */
.hello-enter-to,
.hello-leave {
  transform: translate(0);
}
</style>

三：动态代码第三方库

Animate.css | A cross-browser library of CSS animations.

安装第三方库，进入了里面animate里面会叫怎么使用

<template>
  <div>
    <button @click="isshow = !isshow" appear>显示/隐藏</button>
    <transition-group
      appear
      name="animate__animated animate__bounce"
      enter-active-class="animate__swing"
      leave-active-class="animate__backOutUp"
    >
      <h1 v-show="!isshow" key="1">你好啊！</h1>
      <h1 v-show="isshow" key="2">尚硅谷！</h1>
    </transition-group>
  </div>
</template>

<script>
import "animate.css";
export default {
  name: "Test1",
  data() {
    return {
      isshow: true,
    };
  },
};
</script>
<style scoped>
h1 {
  background-color: rgb(95, 8, 234);
  /* transition: 0.5s; */
}
</style>

 四：在ToolList中最好往Item中添加动画