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);

},

}

})

}