<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="//cdn.bootcss.com/animate.css/3.5.2/animate.css" rel="stylesheet">
<style>
/* .hide-leave-active,.hide-enter-active{
transition: opacity .5s
}
.hide-leave-to,.hide-enter{
opacity: 0
}*/
p {
width: 100px;
height: 100px;
background-color: rebeccapurple;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div id="div1">
<button @click="change">点我</button>
<transition
v-on:before-enter="beforeEnter"
v-on:enter="enter"
v-on:leave="leave"
v-bind:css="false">
<p v-show="show">hello</p>
</transition>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: ‘#div1‘,
data: {
show: true
},
methods: {
change: function () {
this.show = !(this.show)
},
beforeEnter: function (el) {
Velocity(el, {
width: ‘500px‘,
color: ‘red‘,
opacity: 0,
}, {
duration: 1100,
easing: "swing"
})
},
enter: function (el, done) {
Velocity(el, {
opacity: 1,
top: ‘100px‘,
color: ‘blue‘
}, {
duration: 1100,
easing: "swing",
});
Velocity(el, {
top: ‘150px‘,
color: ‘blue‘
}, {
duration: 1100,
easing: "swing",
complete: done
})
},
leave: function (el, done) {
Velocity(el, {
top: ‘200px‘,
color: ‘blue‘,
opacity: 0,
}, {
duration: 1100,
easing: "swing",
});
Velocity(el, {
top: ‘300px‘,
color: ‘blue‘
}, {
duration: 1100,
easing: "swing",
complete: done
})
}
/* beforeEnter: function (el) {
el.style.opacity = 0
el.style.transformOrigin = ‘left‘
},
enter: function (el, done) {
Velocity(el, { opacity: 1, fontSize: ‘1.4em‘ }, { duration: 300 })
Velocity(el, { fontSize: ‘1em‘ }, { complete: done })
},
leave: function (el, done) {
Velocity(el, { translateX: ‘15px‘, rotateZ: ‘50deg‘ }, { duration: 600 })
Velocity(el, { rotateZ: ‘100deg‘ }, { loop: 2 })
Velocity(el, {
rotateZ: ‘45deg‘,
translateY: ‘30px‘,
translateX: ‘30px‘,
opacity: 0
}, { complete: done })
}
*/
}
})
</script>
</html>
另外发现一个vue(可能的)小bug,
就是在切换时候 用 v-show 好使。换成v-if则不行，元素的display一直是none.
但是换成官方的例子是可以的 https://vuefe.cn/v2/guide/transitions.html，
此处暂时记一下，
时间： 2024-10-26 03:39:47