VUE+TS+animate 踩的坑和基础使用方式

直接重点

首先在main.ts中引入animate.css时，报错，找不到模块

需要在shims-vue.d.ts中添加如下代码

原因是引入第三方库或者是Vue文件，TS不知道是干嘛的，看 animate.css是以css为结尾的文件，TS不知道，所有我们需要在shims-vue.d.ts中引入一下，告诉它，就OK了。

其次，版本问题，使用animate安装时，3.x及一下版本使用class调用animate时，中间是空格

而在最新的4.x版本中，使用双下划线的方式来命名Animate.css | A cross-browser library of CSS animations. 可用谷歌翻译一下，比较准确，至少看懂没问题

接下来讲讲，我是如何使用的，直接上源码吧，我也没啥好说的，用起来比较简单，但是前期的坑比较多，接下来会更新TS+VUE+swiper+animate的组合使用

<template><div><div class="content-box1 animate animated" ref="jump">跳一下</div><div class="content-box2 animate animated animate bounce">快，更快</div></div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";@Component
export default class animateS extends Vue {// this.$refs.jump.a = () => {console.log(1);};mounted() {(this.$refs.jump as HTMLDivElement).addEventListener("animationend", this.a);}destroyed() {(this.$refs.jump as HTMLDivElement).removeEventListener("animationend", this.a);}
}
</script>

这里的方法是获取到动画结束时，给它加点其他东西，在animate的官网上也有使用方法，不过我用TS稍微谢了一下

<style lang="less" scoped>
.content-box1 {width: 200px;height: 200px;background-color: pink;animation: bounce; /* referring directly to the animation's @keyframe declaration */animation-duration: 2s;// animation-delay: 3s;// animation-faster: 500ms;
}
.content-box2 {width: 200px;height: 200px;background: yellowgreen;// --animate-duration: 800ms;
}
.animated {-webkit-animation-duration: 1s;animation-duration: 2s; // 动画执行时间-webkit-animation-fill-mode: both;animation-fill-mode: both;
}
</style>

最后提一句，在第二个div中如果加上animate faster 和 animate infinite infinite 将会非常的鬼畜

最后的最后给大家一个链接，里面有比较详细的animate属性方法，基础使用就不用去查文档了

Vue引用Animate.css动画库实现应用过渡效果（以及不生效避坑）_Zoriah的博客-CSDN博客一、安装animate.cssnpm install animate.css@3.5.1 -S划重点：博主使用的vue-cli3.0+，如果不指定animate的（低）版本，动画不生效！！！建议使用@3.x.x版本。二、在main.js中全局引入import animated from 'animate.css' // 引入Vue.use(animated) // 全局注册三、使用方法：给指定的元素加上指定的动画样式名<div class="animated fadeInUp">https://blog.csdn.net/Zoriah/article/details/111172226

VUE+TS+animate 踩的坑和基础使用方式相关推荐

java 类大写_记java实体类属性名为全部为大写踩的坑（基础）
1.今天后台使用实体类接收参数,然后有个参数发现明明前后都是对应的,但是那个属性偏偏的不到数据后面百度才知道(写前端太久java基础都给忘了,该补补了) spring默认的命名方式为,首字母转小写, ...
java 实体类返回大写_记java实体类属性名为全部为大写踩的坑（基础）
1.今天后台使用实体类接收参数,然后有个参数发现明明前后都是对应的,但是那个属性偏偏的不到数据后面百度才知道(写前端太久java基础都给忘了,该补补了) spring默认的命名方式为,首字母转小写, ...
H5跳转微信小程序-成功案例（VUE）（踩坑无数）
这里写自定义目录标题准备工作根据官方提供的资料需准备以下几点: 1.已认证的服务号 2.绑定JS接口安全域名 (在微信公众平台设置) 3.IP白名单 (在微信公众平台设置) 4.将小程序和H5公众 ...
Hexo+next主题配置踩的坑
Hexo+next主题配置踩的坑下载安装完next主题后才发现一堆的坑.由于next的版本不同.所以有的配置文件和网上的教程不大一样.自己踩了N多坑,于是打算记录一下.于是自己试了好几天才差不多配置 ...
仿有赞后台+vue+ts+vuecli3.0+elementUi 集合看这篇就够了
前言最近尝试了vue+ts的组合个人感觉vue对于ts并没有特别的像angular2这样的友好,但是对于ts和js之间个人还是选择ts的.语法糖来说es6简直舒爽,下面我详细介绍下怎么使用ts+vu ...
Vue + Element + animate.css 音乐网站（网易云版）
Vue + Element + animate.css 音乐网站一.前言这是小弟的毕业设计,也是第一次用vue框架独立开发网站,现在接入了网易云api,到后面我还会做对应的后端和管理端.因为是第一 ...
2021年Java面试题目最新总结【90%面试会踩的坑】
学会java技术之后大家面临的最多的问题就是面试这关,求职面试java岗位是否能够成功是直接影响我们的工作机会的,所以对于Java程序员面试你准备好了吗?今天小编汇总了一下关于Java程序员面试,90 ...
vscode Vue ts 自定义模板
vscode Vue ts 自定义模板首先打开vscode选择用户片段选择vue.json {// Place your snippets for vue here. Each snippet i ...
【回眸】作为一位应届生，写简历的时候会踩哪些坑？
[回眸]作为一位应届生,写简历的时候会踩哪些坑? [回眸]作为一位应届生,写简历的时候会踩哪些坑? 前言简历基本信息简历文件名称怎么写比较好电话号码一定要写吗? 简历上写什么邮箱比较好? 简历上 ...

VUE+TS+animate 踩的坑和基础使用方式

VUE+TS+animate 踩的坑和基础使用方式相关推荐

最新文章

热门文章