vue+JavaScript实现slideDown与slideUp效果

整段代码如下代码片.

// An highlighted block
<template><div style="width:400px;margin:100px auto;"><div class="con"><div class="same_module"><div class="title up" @click="slide($event)"><span>标题一</span><i class="arrow"></i></div><div class="detail" style="height:0"><div class="inner"><p>这是一段文本</p><p>这是一段文本</p><p>这是一段文本</p><p>这是一段文本</p></div></div></div></div></div>
</template><script>
export default {data () {return {}},methods:{slide:function(event){let curTarget = event.currentTarget,containsCurClass = curTarget.classList.contains("up"),nextSibling = curTarget.nextSibling;while(nextSibling.nodeType == 3 && /\s/.test(nextSibling.nodeValue)){nextSibling = nextSibling.nextSibling;};let detailScrollHeight = nextSibling.scrollHeight;if(containsCurClass){curTarget.classList.remove("up");this.toggleSlide(nextSibling,detailScrollHeight,'500');}else{curTarget.classList.add("up");this.toggleSlide(nextSibling,0,'500');}},toggleSlide:function(dom,height,time){dom.style.transition = 'height ' + time + 'ms';dom.style.height = height + 'px';}}
}
</script>
<style scoped>.same_module{border:1px solid grey;}.title{color:#fff;height:30px;line-height:30px;background:blue;padding:0 10px;cursor: pointer;overflow: hidden;}.title span{vertical-align:middle;}.title .arrow{float: right;}.detail{overflow: hidden;}.detail .inner{padding:5px 10px;background: #808080;color:#fff;}.detail p{line-height: 26px;}.arrow{display: inline-block;border-top: 2px solid;border-right: 2px solid;width: 8px;height: 8px;border-color: #EA6000;transform: rotate(315deg);position: relative;transition: all 0.5s ease-in;transform-origin: center center;top:50%;margin-top:-10px;}.up .arrow{transform: rotate(135deg);}</style>

# vue+JavaScript实现slideDown与slideUp效果相关推荐

JS实现slideDown()和slideUp()效果
JS实现slideDown()和slideUp()效果这两天在写一个小Demo,页面顶部需要实现webAPP那种将导航收起,通过按钮点击显示与隐藏的效果.实现过程中也花费时间挺久的,现在单独将这部分 ...
利用css3实现jQuery中的slideDown和slideUp效果
最开始想要实现一个菜单从上向下滑出的效果,采用transition: translate 0.5s ease-in;总是觉得别扭的很,无意间看到小米官网的二级菜单从上向下滑出的效果,顿时觉得这样就不会 ...
51 jQuery-使用slideDown()与slideUp()方法实现滑动效果
1.效果图 2.HTML代码 <!DOCTYPE html> <html> <head><meta charset="utf-8"> ...
jQuery 效果 - 滑动 slideDown()与slideUp()与slideToggle()
jQuery 滑动方法可使元素上下滑动. jQuery slideDown() 方法用于向下滑动元素. $(selector).slideDown(speed,callback); 可 ...
jQuery 效果 - 滑动 slideDown，slideUp，slideToggle的使用
//slideDown() 方法用于向下滑动元素 $(document).ready(function(){$(".flip").click(function(){$(" ...
php 标签页切换,vue.js实现标签页切换效果
第二个实例是关于标签页切换的,先看一下效果: 这也是一个很常见的交互效果,以往正常的javascript写法是给各个按钮绑定事件来切换不同的层,当然也可以用纯css写,给上面的三个切换的层分别添加一个 ...
Vue项目实现编辑个人资料效果
主要内容本章目标:vue+element-ui实现编辑个人资料效果注意事项:安装element-ui 1.效果展示 2.视图页面:views space.vue <template>& ...
JQuery： slideDown与slideUp
HZY SlideDown和slideUp是JQuery中的方法 SlideDown是通过高度变化(向下增大)来动态地显示所有匹配的元素 SlideDown有三个参数 speed:动画时长的毫秒数值 ...
php实现页面雪花效果,JavaScript_使用javascript实现雪花飘落的效果，看了javascript网页特效实例大全 - phpStudy...
使用javascript实现雪花飘落的效果看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈 ...

# vue+JavaScript实现slideDown与slideUp效果

vue+JavaScript实现slideDown与slideUp效果

# vue+JavaScript实现slideDown与slideUp效果相关推荐

最新文章

热门文章