vue：transition:
https://cn.vuejs.org/v2/guide…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动画</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<link rel="stylesheet" type="text/css" href="https://daneden.github.io/animate.css/animate.min.css" />
<style type="text/css">
p {
width: 300px;
height: 300px;
background: red;
margin: 10px auto;
opacity: 1;
}
.slide-fade-enter-active {
transition: all 1s ease;
}
.slide-fade-leave-active {
transition: all 1s;
}
.slide-fade-enter,
.slide-fade-leave-active {
opacity: 0;
}
</style>
</head>
<body>
<div id="box">
<!-- 控制数据的值切换显示隐藏 -->
<button @click="show=true">transition</button>
<transition enter-active-class="zoomInLeft" v-on:before-enter="beforeEnter">
<p v-show="show" class="animated" animate-delay="0s" animate-duration="1s" ></p>
</transition>
<!-- 第二种方法 -->
<!--<transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight" v-on:before-enter="beforeEnter" :animate-delay="delay" :animate-duration="duration">
<p v-show="show" animate-delay="1s" animate-duration="2s" ></p>
</transition>-->
<!-- 多元素运动 -->
<transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight" v-on:before-enter="beforeEnter">
<p v-show="show" class="animated" :key="1" animate-delay="1s" animate-duration="2s"></p>
<p v-show="show" class="animated" :key="2" animate-delay="2s" animate-duration="3s"></p>
</transition-group>
</div>
<script type="text/javascript">
window.onload = function() {
var app = new Vue({
el: '#box',
data: {
show: false
},
methods: {
beforeEnter: function(el) {
var delay = el.getAttribute('animate-delay'),
duration = el.getAttribute('animate-duration');
console.log('attr:' + delay, duration);
var cssObj = {
"animation-delay": delay,
"-webkit-animation-delay": delay,
"animation-duration": duration,
"-webkit-animation-duration": duration,
"visibility": "visible"
}
var getCssText = function(obj) {
var text = [];
for(var o in obj) {
text.push(o + ":" + obj[o])
}
return text.join(';')
}
el.style.cssText = getCssText(cssObj);
},
}
})
}
</script>
</body>
</html>