五分钟带你玩转vue（五）动画
【摘要】
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 包括以下工具：
在 CSS 过渡和动画中自动应用 class可以配合使用第三方 CSS 动画库，如 Animate.css在过渡钩子函数中使用 JavaScript 直接操作 DOM可以配合使用第三方 JavaScript 动画库，如 Velocity.js
...
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。
包括以下工具：
- 在 CSS 过渡和动画中自动应用 class
- 可以配合使用第三方 CSS 动画库，如 Animate.css
- 在过渡钩子函数中使用 JavaScript 直接操作 DOM
- 可以配合使用第三方 JavaScript 动画库，如 Velocity.js
下面简单做一下动画的实例
动画简单实例
隐藏显示
-
app.vue
-
<template>
-
<div id="app">
-
<anim/>
-
</div>
-
</template>
-
-
<script>
-
import anim from './components/anim.vue'
-
-
export default {
-
name: 'App',
-
components:{
-
anim
-
},
-
data () {
-
return {
-
}
-
},
-
methods: {
-
clickButton(event){
-
if(this.stutas ==HelloWorld){
-
this.stutas = HelloWorld2
-
}else{
-
this.stutas = HelloWorld
-
}
-
}
-
},
-
}
-
</script>
-
-
<style>
-
-
</style>
-
-
-
-
Anim.vue
-
<template>
-
<div id="demo">
-
<button v-on:click="show = !show">
-
Toggle
-
</button>
-
<!-- 动画必备 -->
-
<transition name="demo">
-
<p v-if="show">hello</p>
-
</transition>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name: 'anim',
-
data () {
-
return {
-
show: true
-
}
-
},
-
methods: {
-
clickButton(){
-
}
-
}
-
}
-
</script>
-
-
<style>
-
.demo-enter-active, .demo-leave-active {
-
transition: opacity 5s;
-
}
-
.demo-enter, .demo-leave-to /* .fade-leave-active below version 2.1.8 */ {
-
opacity: 0;
-
}
-
-
</style>
移动
-
<template>
-
<div id="demo">
-
<button v-on:click="show = !show">
-
Toggle
-
</button>
-
<!-- 动画必备 -->
-
<transition name="demo">
-
<p class = "myDemo" v-if="show">hello</p>
-
</transition>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name: 'anim',
-
data () {
-
return {
-
show: true
-
}
-
},
-
methods: {
-
clickButton(){
-
}
-
}
-
}
-
</script>
-
-
<style>
-
.demo-enter-active, .demo-leave-active {
-
transition: all .5s ease;
-
}
-
-
.demo-enter, .demo-leave-to /* .fade-leave-active below version 2.1.8 */ {
-
transform: translateX(100px);;
-
}
-
-
.demo-enter-to, .demo-leave /* .fade-leave-active below version 2.1.8 */ {
-
transform: translateX(0px);;
-
}
-
-
.myDemo{
-
position:absolute;
-
left:50px
-
}
-
</style>
使用第三方库
引入第三方库 https://daneden.github.io/animate.css/
index.html引入
-
<!DOCTYPE html>
-
<html>
-
-
<head>
-
<meta charset="utf-8">
-
<meta name="viewport" content="width=device-width,initial-scale=1.0">
-
<link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">
-
<title>project</title>
-
</head>
-
-
<body>
-
<div id="app"></div>
-
<!-- built files will be auto injected -->
-
</body>
-
-
</html>
引入div 多种样式可以参考文档 也可以去https://daneden.github.io/animate.css/寻找动画
-
<template>
-
<div id="example-3">
-
<button @click="show = !show">
-
Toggle render
-
</button>
-
<transition
-
name="custom-classes-transition"
-
enter-active-class="animated zoomOutRight"
-
leave-active-class="animated fadeInDownBig"
-
>
-
<p v-if="show">hello</p>
-
</transition>
-
</div>
-
</template>
-
-
<script>
-
export default {
-
name: 'anim',
-
data () {
-
return {
-
show: true
-
}
-
},
-
methods: {
-
}
-
}
-
</script>
-
-
<style>
-
-
</style>
文章来源: baocl.blog.csdn.net，作者：小黄鸡1992，版权归原作者所有，如需转载，请联系作者。
原文链接：baocl.blog.csdn.net/article/details/104729177
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）