animate.css在Vue中的使用

# Vue集成第三方动画库animate.css官网链接：https://animate.style/安装：npm install animate.css --save在项目种引入import "animate.css"使用animate.css给transition标签添加上固定的name属性按需求添加上enter-active-class="官网上自己找动画值" =》进入动画的过程leave-acitve-class="官网上自己找动画值" =》离开动画的过程<transition name="animate__animated animate__bounc" enter-active-class="" leave-acitve-class="">

animate官网地址：https://animate.style/

<template><div><button @click="showHide">显示与隐藏</button><transition-groupname="animate__animated animate__bounc"enter-active-class="animate__fadeInBottomRight"leave-active-class="animate__fadeOutUp":appear="true"><div class="box" v-show="isShow" key="1"></div><div class="box" v-show="isShow" key="2"></div></transition-group></div>
</template><script>
import "animate.css";
export default {data() {return {isShow: true,};},methods: {showHide() {this.isShow = !this.isShow;},},
};
</script><style scoped>
.box {width: 300px;height: 30px;background-color: pink;
}
</style>

animate.css在Vue中的使用相关推荐

animate.css在vue中进行路由切换时的转场动画
在做一些后台管理或者是一些跳转型的网站的时候我们会遇到用动画去切换,显得网站动态化效果强一点,毕竟vue框架属于单页面应用,有些时候一些动画会显得页面的逼格更高一点在选择动画的时候我们绝大多数都会考 ...
animate.css在vue项目中的使用
第一步:安装: 在命令行中执行:npm install animate.css --save 第二步:引入及使用: 使用: 转载于:https://www.cnblogs.com/wangshengl ...
animate.css 在 vue 脚手架中结合wow.js的应用方法详细介绍
简介众所周知,animate.css是非常优秀的CSS3动画库,不依赖于jQuery,纯CSS动画,但是不兼容IE8及以下版本,就算用jq控制,性能也不是很好. wowjs向下滚动页面时显示CSS动 ...
解决动画库Animate.css在谷歌浏览器中没有效果的问题
调整窗口的外观和性能可搜索外观与性能或 win+R %windir%\system32\SystemPropertiesPerformance.exe
vue动画库-Animate.css的使用以及部分问题
vue动画库-Animate.css的使用以及部分问题 Animate.css在vue脚手架中的使用详情见官网: Animate.css | A cross-browser library of C ...
vue中的几个动效网站
1.vue2-animate 地址:https://www.npmjs.com/package/vue2-animate 一个可以在你的网站中即用型跨浏览器动画库,非常适合主页.滑块和动画引导提示.这 ...
Vue实战项目开发--Vue中的动画特效
项目的源代码在GitHub上:点击查看目录 vue中的css动画原理在Vue中使用Animate.css库在Vue中同时使用过渡属性和动画 Vue中的Js动画与Velocity.js的结合 Vu ...
animate.css 使用记录
1.animate.css官网 2.vue使用animate.css没有效果一定要加上前缀animate__, transition中使用也要记得加. // 1 .安装 npm i animate. ...
vue自定义动画以及animation包在vue中的使用
vue动画自定义动画当vue中,显示隐藏,创建移除,一个元素或者一个组件的时候,可以通过transition实现动画. 如果元素或组件离开,完成一个淡出效果: <transition nam ...
jquery 加载中_在 vue 中使用 ztree
vue-cli版本:@vue/cli 4.3.1 安装ztree和jquery npm i @ztree/ztree_v3npm i jquery@1.11.3 打开vue.config.js文件,添 ...

animate.css在Vue中的使用

animate官网地址：https://animate.style/

animate.css在Vue中的使用相关推荐

最新文章

热门文章