首先是Animate动画库问题

<transition
      enter-active-class="animate__animated animate__zoomIn"
      leave-active-class="animate__animated animate__zoomIn"
    >
<div class="box" v-if="blow"></div>
</transition>

css

.animate__animated,
.animate__zoomIn {
  animation-delay: 2s;
  --animate-duration: 10s;
}

这样就可以进行动画的播放，但是问题来了我为什么动画延迟和动画时长用不同写法，有一个简单又复杂的原因
. 首先Animate官方文档中有说过一种方法可以修改全局动画

:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}

但是如果直接去用就会有问题，经过同学集思广益，发现有可能是因为vue组件中的css样式带有scoped限制了:root的位置，所以是没有办法修改全局动画的。，而我也照做了但问题来了

animation-delay: 2s;
animation-duration:3s

这样式在有scoped的情况下是没有问题的，但是没有了scoped 之后他的动画持续时长是无效的，但延迟有效

--animate-duration: 10s;
--animate-delay: 1s;

而这个样式他的动画持续时长有效，而动画延迟无效我百思不得其姐，希望有大佬能给我指条明路

aox.js动画库使用心得

1.首先就是安装 npm install aos --save 2.就是全局引入

import '../node_modules/aos/dist/aos.css'
import AOS from'aos'
Vue.use(AOS)

3.就是在当前组件引入import AOS from "aos";
4. 通过AOS.init()初始化AOS
5.去官网找样式：www.xyhtml5.com/examples/ao…
aos的简单属性
data-aos-offset 是立刻触发动画还是在指定时间之后触发动画 200 120

data-aos-duration 动画持续时间 600 400

data-aos-easing 动画的easing动画效果 ease-in-sine ease

data-aos-delay 动画的延迟时间 300 0

data-aos-anchor 锚元素。使用它的偏移来取代实际元素的偏移来触发动画 #selector null

data-aos-anchor-placement 锚位置，触发动画时元素位于屏幕的位置 top-center top-bottom

data-aos-once动画是否只会触发一次，或者每次上下滚动都会触发 true false

AOX.js 动画库使用个人心得加个人Animate动画库问题

aox.js动画库使用心得