当前位置:首页 > vue.js > 正文内容

vue 滑入滑出效果动画

自由小鸟3个月前 (05-18)vue.js347

<transition>
<span v-show="errorMessage" class="message"><span class="icon" :class="errorMessage=='审批完成'?'success':'error'"></span>{{errorMessage}}</span>
</transition>

.v-enter-active{
animation: slidein .3s linear;
}
.v-leave-active{
animation: slidein .3s linear reverse;
}

@keyframes slidein{
from{
transform: translateX(240px);
}
to{
transform: translateX(0px);
}
}

重点js里来控制这个errorMessage值有或者无就会滑入滑出

版权声明:本文由Web学习之路发布,如需转载请注明出处。

本文链接:https://webge.net/?id=135

“vue 滑入滑出效果动画” 的相关文章

vue-router 路由的配置

vue-router 路由的配置

最好定义一个专门的路由配置文件来管理路由地址  接下来在点击的元素上开始设置路由path接收的 链接地址 例如以下...

vuex刷新状态消失的解决办法

vuex做数据管理非常好,但是唯一美中不足的地方,就是当页面刷新的时候状态保存不下来,但是工作业务中,常常会遇到,可能需要把状态保留下来的情况那在这种情况下可以使用方案:在 app.vue中的created函数中写如下代码:localstorage和sessionStorage都可以//在页面加载时...

vue 公告滑动效果

vue 公告滑动效果

适应只显示一条 <div class="marquee_box"> <ul class="marquee_list" :class="{marquee_top:animate}"> &l...

vue 时间戳转今天,昨天,以前时间

filters:{ formatDate(date) { const lastDate = new Date(date); lastDate.setHours(0); lastDate.setMinutes(0); lastDate.setSecon...

vue updateModel

vue updateModel

v-model高级用法...