animate引用
2022-08-11 本文已影响0人
zZ_d205
这里先给出动画库的网址：
-
https://animate.style/
直接进入动画库，可以看到在网页的左侧，有很多的动画效果，你可以点击进行预览。
现在你要使用这个动画库，可以直接在HTML页面中引入CDN地址。
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
</head>
然后在想有动画的标签加上animate__animated 和任何的动画效果,比如animate__bounce （跳动的动画）。就可以实现一个酷炫的CSS动画效果了。
template: `
<transition
enter-active-class="animate__animated animate__bounce"
leave-active-class="animate__animated animate__bounce"
>
<div v-if="isShow">技术胖讲程序</div>
</transition>
<button @click="hanldClick">切换动画</button>
`
此时到浏览器中查看一下效果，这时候的文字就是蹦蹦跳跳的进入和退出页面的。
有些时候过渡和动画时长并不是一致的，比如过渡时间是7秒，动画时间还是3秒。在进场动画时，你可能还感觉不到Bug，但在出场动画时，就会有严重的问题。动画结束后，为了显示过渡效果，元素又回到了页面上，直到过渡结束，才消失。
为了解决这个问题，可以在<transition>标签上加入type='animation'属性，意思是不管过渡时长是多少，动画结束，整个过程结束。
template: `
<transition type="animation">
<div v-if="isShow">技术胖讲程序</div>
</transition>
<button @click="hanldClick">切换动画</button>
`
当然你也可以把动画时间调长为7秒，然后过渡调整为3秒，这时候你可以使用type='transition'，属性，避免Bug。现在的意思就是以过渡时长为准，过渡结束，动画结束。我们来看一下效果。
.v-enter-active {
animation: comein 7s;
transition: opacity 3s ease-out;
}
.v-leave-active {
animation: comeout 7s;
transition: opacity 3s ease-out;
}
模板部分修改如下：
template: `
<transition type="transition">
<div v-if="isShow">技术胖讲程序</div>
</transition>
<button @click="hanldClick">切换动画</button>
`
这时候过渡结束，动画也随之结束。不过这时候看起来很不自然，因为子还没有走到它应该走的位置，结果动画结束了，就会有跳帧现象。
还有一种情况，就是我们不管CSS中的动画和过渡时长，以标签为准。可以绑定属性<transition :duration="1000"> 来控制时长，意思是1秒后，结束动画和过渡。注意这里的1000是毫米的意思，也就是1秒。
template: `
<transition :duration="1000">
<div v-if="isShow">技术胖讲程序</div>
</transition>
<button @click="hanldClick">切换动画</button>
这时候再到浏览器中查看，可以看到1秒种过渡和动画虽没有完成，但是还是停止了。
duration除了能写一个数字之外，还可以写对象进去，比如入场的时候1秒种，出厂的时候3秒钟，就可以这样写。
<transition :duration="{enter:1000,leave:3000}">
