vue动画
【摘要】 vue动画
一、vue中css 的动画原理
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>fade出入动画</title> <script src="https://...
vue动画
一、vue中css 的动画原理
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>fade出入动画</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style type="text/css">
.fade-enter{
opacity: 0;
}
.fade-enter-active{
transition:opacity 3s;
}
.fade-leave-to{
opacity: 0;
}
.fade-leave-active{
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="app">
<transition name="fade">
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
show:true
},
methods:{
handleClick: function () {
this.show = !this.show;
}
}
});
</script>
</body>
</html>
二、使用animate.css库
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用animate.css库</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="../animate.css" />
<style type="text/css">
/*@keyframes bounce-in {
0% {
transform: scale(0);
}
50% {
transform: scale(1.5);
}
100% {
transform: scale(1);
}
}
.fade-enter-active {
transform-origin: left center;
animation: bounce-in 1s;
}
.fade-leave-active {
transform-origin: left center;
animation: bounce-in 1s reverse;
}*/
/*.enter{
transform-origin: left center;
animation: bounce-in 1s;
}
.leave{
transform-origin: left center;
animation: bounce-in 1s reverse;
}*/
</style>
</head>
<body>
<div id="app">
<!--自定义动画enter 和 leave 的 class名称-->
<!--使用animate.css库-->
<transition name="fade" enter-active-class="animated swing" leave-active-class="animated shake">
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show;
}
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用animate.css库</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="../animate.css" />
<style type="text/css">
.fade-enter{
opacity: 0;
}
.fade-enter-active {
transition: opacity 3s;
}
.fade-leave-to{
opacity: 0;
}
.fade-leave-active {
transition: opacity 3s;
}
</style>
</head>
<body>
<div id="app">
<!--自定义动画enter 和 leave 的 class名称-->
<!--使用animate.css库-->
<transition name="fade"
type="transition"
:duration="{enter:5000,leave:10000}"
appear
enter-active-class="animated swing fade-enter-active"
leave-active-class="animated shake fade-leave-active"
appear-active-class="animated swing">
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show;
}
}
});
</script>
</body>
</html>
三 、vue 中的js动画 与 velocity.js 动画库
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue中的js动画 与 velocity.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/velocity/2.0.5/velocity.js"></script>
</head>
<body>
<div id="app">
<!--
作者：offline
时间：2019-03-24
描述：transition 的 几个监听钩子函数
@before-enter
@enter
@after-enter
@before-leave
@leave
@after-leave
-->
<transition name="fade" @before-enter="handleBeforeEnter" @enter="handleEnter" @after-enter="handleAfterEnter">
<div v-show="show">hello world</div>
</transition>
<button @click="handleClick">切换</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show;
},
handleBeforeEnter: function(el) {
//el.style.color = "red";
el.style.opacity = 0;
},
handleEnter: function(el, done) {
// setTimeout(() => {
// el.style.color = 'green';
// }, 2000);
// setTimeout(() => {
// done();
// }, 4000)
Velocity(el,{opacity:1},{duration:1000,complete:done})
},
handleAfterEnter: function(el) {
//el.style.color = 'black'
alert("动画结束")
}
}
});
</script>
</body>
</html>
四、vue中多元素或组件的过渡,vue中列表的过渡 以及动画通过组件的形式封装
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue中多元素或组件的过渡,vue中列表的过渡 以及动画通过组件的形式封装</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.bootcss.com/velocity/2.0.5/velocity.js"></script>
<style type="text/css">
.v-enter,
.v-leave-to {
opacity: 0;
}
.v-enter-active,
.v-leave-active {
transition: opacity 1s;
}
</style>
</head>
<body>
<div id="app">
<!--
作者：offline
时间：2019-03-24
描述：transition 的 几个监听钩子函数
@before-enter
@enter
@after-enter
@before-leave
@leave
@after-leave
-->
<transition mode="in-out">
<!--<div v-if="show" key="hello">hello world</div>
<div v-else="show" key="bye">bye world</div>-->
<child v-if="show"></child>
<child-one v-else="show"></child-one>
</transition>
<button @click="handleClick">切换</button>
<transition-group>
<div v-for="(item,index) of list" :key="item.id">
{{item}}
</div>
</transition-group>
<button @click="handleBtnClick">Add</button>
<fade :show="show">
<div><h1>123</h1></div>
</fade>
<fade :show="show">
<p>asjd金卡说不定卡比烧烤店把卡仕达卡仕达你阿兰埃里克森你打曼德拉上的
啊看到了看上的</p>
</fade>
</div>
<script type="text/javascript">
//定义组件
Vue.component("child", {
template: "<div>child</div>"
});
Vue.component("child-one", {
template: "<div>child-one</div>"
});
Vue.component("fade",{
props:['show'],
template:`<transition
@before-enter="handleBeforeEnter"
@enter="handleEnter" @after-enter="handleAfterEnter">
<slot v-if="show"></slot>
</transition>`,
methods:{
handleBeforeEnter: function(el) {
//el.style.color = "red";
//el.style.opacity = 0;
},
handleEnter: function(el, done) {
setTimeout(() => {
el.style.color = 'orange';
}, 2000);
setTimeout(() => {
done();
}, 4000)
// Velocity(el,{opacity:1},{duration:1000,complete:done})
},
handleAfterEnter: function(el) {
el.style.color = 'black'
//alert("动画结束")
}
}
});
var count = 0;
var app = new Vue({
el: "#app",
data: {
show: true,
list: []
},
methods: {
handleClick: function() {
this.show = !this.show;
},
handleBtnClick:function () {
this.list.push({
id:count++,
title:"hello world"
})
}
}
});
</script>
</body>
</html>
文章来源: blog.csdn.net，作者：血煞风雨城2018，版权归原作者所有，如需转载，请联系作者。
原文链接：blog.csdn.net/qq_31905135/article/details/88779947
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
作者其他文章
评论（0）