css延时效果,vue transition和animate.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;
}
transition
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);
},
}
})
}