vue.js中自定义过度类名中的个别属性不起作用的问题
vue中enter-class/enter-to-class/enter-active-class中的属性不起作用的问题解决方法。
近日在研究vue.js的过程中发现了一些很费解的问题，以下就是这些问题：
实例主要代码（可以先看问题，再来看代码）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义过度类名</title>
<script src="vue.js"></script>
</head>
<style>
.Entto {
color: #ff6666;
}
.Ent {
color: #2bcfff;
}
.Lea {
color: yellow
}
.Leato{
color: purple;
}
.EntAct,.LeaAct{
color: #1c8942;
transition: all .6s ease;
}
</style>
<body>
<div id="app">
<button v-on:click="show=!show">
Button Hide
</button>
<transition
:duration = "{ enter:500 , leave : 1000}"
name="hello"
enter-class="Ent"
enter-to-class="Entto"
enter-active-class="EntAct"
leave-class="Lea"
leave-active-class="LeaAct"
leave-to-class="Leato"
>
<h1 v-if="show"> Hello world</h1>
</transition>
</div>
<script>
new Vue({
el: '#app',
data: {
show: true
}
})
</script>
</body>
</html>1、leave-class中的属性不起作用，（如果你也发现了这个问题不要太纠结了，有解决办法更好，没有就不要用了。）
2、有时候enter-to-class/enter-class/enter-active-class中的渐变属性不起作用：
原因就是：在enter-active-class中有与他们相同的属性，这个时候只有enter-active-class中的属性起作用。（在leave中也有同样的问题）
处理方法：将style中的enter-active-class放到enter-to-class/enter-class前面，这样enter-to-class/enter-class的属性就可以其作用了，（但是enter-active-class中的就没有了作用，也就是说谁放到后面谁其作用。）
三种情况：
1、先后顺序为：enter-class、enter-to-class、enter-active-class或者是enter-to-class、enter-class、enter-active-class；
此时只有enter-active-class的属性有作用。
2、enter-class、enter-active-class、enter-to-class；
此时是由enter-active-class过渡到enter-to-class属性，enter-class不起作用。
3、enter-to-class、enter-active-class、enter-class、
此时是由enter-class过渡到enter-active-class属性，enter-to-class不起作用。
以上就是关于自定义过渡类名问题的见解，leave的问题就自行探索吧。
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献23条内容
所有评论(0)