在Vue中同时使用过渡和动画-创新互联
加一个功能，当刷新页面的时候也有动画效果(加上appear和appear-active-class="animated rubberBand"：
成都创新互联是一家专业提供
灵山企业网站建设,专注与
成都网站设计、成都网站建设、
H5建站、小程序制作等业务。10年已为灵山众多企业、政府机构等服务。创新互联专业网站建设公司优惠进行中。
//name随便取名:
//自定义class名字：
hello
切换
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show
}
}
});
如果过渡和库的动画都有：
.fade-enter, .fade-leave-to {
opacity: 0
}
.fade-enter-active, .fade-leave-active {
transition: opacity 3s
}
//name随便取名:
//自定义class名字：
hello
切换
var vm = new Vue({
el: "#root",
data: {
show: true
},
methods: {
handleClick: function() {
this.show = !this.show
}
}
});
但是，问题是，animate库的动画时长是1s，而我自己设置的是3s，所以要统一下时间。用type="transition"，意思是以transition时间为准：
(但是经过测试，发现有问题)
还可以设置时间duration="10000"，单位毫秒。还可以设置更细:duration="{enter: 5000, leave: 1000}"：
.fade-enter, .fade-leave-to {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 3s;
}
//自定义class名字：
hello
