vue动画效果-定义动画帧过度效果集成第三方动画animate.css

1.定义动画帧

<template><div><button @click="isShow=!isShow">显示/隐藏</button><!-- //   :appear="true"表示加载即带有动画效果 --><transition :appear="true"><div class="st" v-show="isShow"><h2>学生姓名：{{name}}</h2><h2>学生性别：{{sex}}</h2></div></transition><!-- 也可以自己设置名字 --><transition name="hello" :appear="true"><h2 class="hi" v-show="isShow">你好</h2></transition></div>
</template><script>
export default {data() {return {name:"张三",sex:"男",isShow:true}}
}
</script><style scoped>
.st{background-color: aqua;
}
.hi{background-color: blanchedalmond;
}
/* 定义一个动画帧 */
@keyframes stu {from{transform: translateX(-100%);}to{transform: translateX(0px);}
}
/* 不命名固定格式 */
.v-enter-active{animation: stu 1s;
}
.v-leave-active{/* 反转 */animation: stu 1s reverse;
}/* 自己命名固定格式 */
.hello-enter-active{/* linear匀速 */animation: stu 1s linear;
}
.hello-leave-active{/* 反转 */animation: stu 1s reverse;
}
</style>

2.过度效果

<template><div><button @click="isShow=!isShow">显示/隐藏</button><transition-group :appear="true"><h2 v-show="isShow" key="1">学校</h2><h2 v-show="isShow" key="2">清华</h2></transition-group></div>
</template><script>
export default {data() {return {isShow:true}},
}
</script><style scoped>h2{background-color: chartreuse;}/* 进入的起点 */ /* 离开的终点 */.v-enter,.v-leave-to{transform: translateX(-100%);}/* 进入的终点 *//* 离开的起点 */.v-enter-to,.v-leave{transform: translateX(0);}.v-enter-active,.v-leave-active{transition: 1s linear;}
</style>

3.集成第三方动画animate.css

*npm第三方动画库：npm官网下搜索animate.css

进入主页面：

*安装第三方库：npm install animate.css

*引入：import 'animate.css'

*使用：

1.引入类名：name="animate__animated animate__bounce"

2.添加进入动画：enter-active-class="animate__swing"

3.添加离开动画：

leave-active-class=” animate__bounceOutDown”

<template><div><button @click="isShow=!isShow">显示/隐藏</button><!-- 引入类名：name="animate__animated animate__bounce" --><!-- 去库里选一个进入的动画 --><!-- 选离开的动画 --><transition :appear="true"name="animate__animated animate__bounce" enter-active-class="animate__swing"leave-active-class="animate__bounceOutDown"><h2 v-show="isShow">集成第三方动画</h2></transition></div>
</template><script>
import 'animate.css'
export default {data() {return {isShow:true}},
}
</script><style scoped>h2{background-color: deeppink;}
</style>

vue动画效果-定义动画帧过度效果集成第三方动画animate.css相关推荐

3 css 奖品出现弹出动画_【技术】nuxt中引入wow和animate.css 页面随滚动条出现动画...
1. 通过nodejs安装 cnpm install wowjs --save-dev 安装成功后在"package.json: "wowjs": "^1.1. ...
Vue CSS3或者npmjs网站中的animate.css实现动画效果
cartoonvue.vue(CSS3)支持一个动画 <template><div><h2>动画效果 ...
vue过渡动画Animate.css动画库(1)
一.前言: 在开发中,我们想要给一个组件的显示和消失添加某种过渡动画,可以很好的增加用户体验, Vue中为我们可以自定义过渡或动画或者Vue提供一些内置组件完成动画,利用它们我们可以方便的实现过渡动画 ...
vue中如何实现滚动页面的动画-animate.css和wow.js
两种方法: 第一种方法:npm安装包animate.css和wow.js 第二种方法:静态资源的引入第一种方法: 1.引入静态资源包静态资源包,需要注意的是.必须放到static文件夹下面 < ...
CSS3动画animation认识和Animate.css的使用
CSS动画可以取代js动画在移动端会更加流畅! 下面是一个的绘制太阳系各大行星运行轨迹笔记,可以自学参考! 首先我们需要创建一个@keyframes规则 @keyframes name{from{w ...
css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
css animation动画完成后隐藏_css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
前端进阶必学必会动画学习之Animate.css的使用与解析：一个强大而酷炫的CSS3动画库Animate.css使用方法教程
简介 animate.css 是一个来自国外的 CSS3 动画库,它预设了抖动(shake).闪烁(flash).弹跳(bounce).翻转(flip).旋转(rotateIn/rotateOut). ...
animate.css+wow.js实现网页动画
animate文档地址 wow.js文档地址 <!DOCTYPE html> <html lang="en"><head><meta ch ...

vue动画效果-定义动画帧过度效果集成第三方动画animate.css

1.定义动画帧

2.过度效果

3.集成第三方动画animate.css

vue动画效果-定义动画帧过度效果集成第三方动画animate.css相关推荐

最新文章

热门文章