左右滑入滑出

文章目录

左右滑入滑出
- 用transition
- 不用transition

用transition

    <!--  左边--><transition name="left"><div class="left" v-if="isShowLeft"><!--  点击后left消失再滑入--><p  @click="handleChangeLeft"  style="font-size: 1rem;font-weight: bold;margin-top: 2rem;cursor: pointer">社会xxx</p></div></transition>

   isShowLeft: true,handleChangeLeft () {this.isShowLeft = falsesetTimeout(() => {this.isShowLeft = true}, 100)},

<!--自动匹配到transition的name-->
.left-enter-active {animation: left 1s ease-in-out 1 forwards;
}@keyframes left {0% {left: -23.99rem;opacity: 1;}100% {left: 1.3rem;opacity: 1;}
}

不用transition

  <div class="right" :class="{rightactive: isActive===true}"><!--  点击后right消失再滑入--><div class="title" style="cursor: pointer" @click="rightBtn">数字化xxxx</div></div></div>

   isActive:falserightBtn(){this.isActive = truesetTimeout(()=>{this.isActive = false},2000)}},

.rightactive{animation: anim-open 2s ease;
}
@keyframes anim-open {0%{right: -2394px;}100%{right: 84px;}
}

【动画】左右滑入滑出效果、transition使用相关推荐

jQuery学习笔记系列（一）——入口函数，jQuery对象和DOM对象，jQuery选择器、样式操作、效果（显示隐藏、滑入滑出、淡入淡出、自定义动画、停止动画队列）
day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别能够写出常用的 ...
在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节查看作业目录需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果用户将光标移动到"最新动态页"或"帮助查询" ...
CSS3实现div滑入滑出效果（从下往上）
1,首先需要用的是 CSS3的 target 选择器,配合a标签指定id选择器切换目标元素,用于选取当前活动的目标元素. 2,CSS3 的 transition 动画,这里不做详细介绍看一下效果图: ...
实现元素的滑入滑出效果
文章目录 CSS动画 Demo.vue,使用transition Demo.vue,使用transition,且自定义name Demo.vue,使用transition,且自定义name,且使用属性 ...
css上滑事件,css transition 实现滑入滑出
transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办? ...
前端侧边栏的滑入滑出效果
在使用element-ui的Drawer抽屉功能时达不到我想要的效果,手写一个原生的方法,实现点击按钮时使得div元素能够在页面滑入滑出. 1.页面元素简单,一个button,一个div即可: < ...
Android Fragment切换动画(滑入滑出)
之前写过一篇Activity切换动画的文章Activity切换动画(滑入滑出) 本文还采用滑入滑出的方式,贴一下Fragment之间切换动画的实现,Fragment比Activity需要多考虑一点 a ...
用原生js完成鼠标点击显示滑入滑出效果
最近用原生js做项目练手,自己尝试做了下,可以直接复制代码看效果 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta ch ...
jquery效果显示隐藏滑入滑出
jquery jquery效果 jquery 给我们封装了很多动画效果,最为常见的如下: 显示隐藏:show() / hide() / toggle() ; 滑入滑出:slideDown() / sl ...

【动画】左右滑入滑出效果、transition使用

左右滑入滑出

文章目录

用transition

不用transition

【动画】左右滑入滑出效果、transition使用相关推荐

最新文章

热门文章