五分钟带你玩转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）