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

vue 滑入滑出效果动画

自由小鸟3年前 (2022-05-18)vue.js2372

<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://www.webge.net/?id=135

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

vue class style写法

class,第一种就是把判断的变量放在后面,前面就是判断之后要设置的class名称v-bind:class="{ active: isActive, 'text-danger': hasError }">data: {  isActive: tru...

vue3

vue3

安装vite?-Vite是vue作者开发的一款意图取代webpack的工具,其实原理是利用ES6的import会发送请求加载文件的特性,拦截这些请求,做一些预编译,省去webapck沉长的打包时间安装:npm install -D create-vite-app利用vite创建 vue3项目cre...

watch监听的几种写法

var vm = new Vue({ data: { a: 1, b: 2, c: 3, d: 4, e: { f: { g: 5 } } }, watch: { a...

vue3 新属性使用

vue3 新属性使用

setUp(){} //可以把所有数据和方法都放这里面一起导出,这个是在实现挂载之前就会执行的 ref基本的数据类型 reactive可以把数组,对象转成响应式 readonly处理之后的数据不能进行修改 toRefs可以把响应对象的某个解构出来的值变成响应式,如果原数据没有key,那就会...

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