vue中的动画以及修改v-前缀
Posted progress-
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue中的动画以及修改v-前缀相关的知识，希望对你有一定的参考价值。
HTML页面元素
要为那个元素添加动画，就使用transition标签进行包裹并写样式进行控制
<transition>
<h3 v-if="falge">按钮控制元素h3的显示与隐藏</h3>
</transition>
当页面中有多个元素要添加动画，并且动画效果不一样时，可以给transition 添加一个name，来区分不同组之间的动画
<transition name="my">
<h6 v-if="falge2">按钮控制元素h6的显示与隐藏</h6>
</transition>
style样式
<style>
/* 写两个样式来控制元素的淡入淡出 */
/* 这是两个时间点，进入和离开的时间点 */
.v-enter,
.v-leaver-to{
opacity: 0;
transform: translateX(150px);
}
/* 这是两个时间段 */
.v-enter-active,
.v-leaver-active{
transition: all .8s ease;
}
/*修改v-前缀之后的动画效果*/ /* my是自己自定义的前缀，要跟上面标签中的name名一致*/ /* 这里是控制h6的动画 */
.my-enter,
.my-leaver-to{
opacity: 0;
transform: translateY(150px);
}
.my-enter-active,
.my-leaver-active{
transition: all .8s ease;
}
</style>
以上是关于vue中的动画以及修改v-前缀的主要内容，如果未能解决你的问题，请参考以下文章