vue中的动画以及修改v-前缀

时间：2019-12-12 18:00:30 阅读：95 评论：0 收藏：0 [点我收藏+]

HTML页面元素

要为那个元素添加动画，就使用transition标签进行包裹并写样式进行控制

<h3 v-if="falge">按钮控制元素h3的显示与隐藏</h3>

</transition>

当页面中有多个元素要添加动画，并且动画效果不一样时，可以给transition 添加一个name，来区分不同组之间的动画

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

原文地址：https://www.cnblogs.com/Progress-/p/12030660.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行