如何使用Vue变换来展开和收缩div

文章/答案/技术大牛

发布

3回答

vue.js、vuejs2、transition

使用Vue，我有两个div，我想用一个转换来切换它们。我想在点击时慢慢地扩展div到我想要的宽度，然后在另一次点击时收缩。我可以让div在一次单击时展开，但不知道如何在第二次单击时缩小它。这个小提琴展示了我一直在尝试的东西：https://jsfiddle.net/vxmh8auo/1/ JS new Vue({ d

浏览 152提问于2019-09-25得票数 3

1回答

CSS转换仅适用于入门动画？

javascript、html、css、reactjs、web

我目前正在尝试使用CSS转换来平滑div在悬停时的展开和收缩，然而，转换属性似乎只适用于条目动画(即鼠标悬停，div展开)，而不适用于退出(鼠标离开，div折叠)。column; max-height: 300rem;} <divclassName='co

浏览 2提问于2022-10-30得票数 0

2回答

.toggle()所有高度大于99px的div

jquery

我正在制作一个手风琴类型的效果，使用切换来扩展和收缩div的高度。我想用一个条件来选择展开的div，如果高度超过99px，我认为这是只选择展开的div的最好方法。我哪里错了？

浏览 1提问于2012-10-09得票数 1

1回答

css3过渡折叠菜单

jquery、css、css-transitions

我制作了一个折叠菜单来替换选择表单控件，并且我想使用css3转换来使它平滑地展开/收缩。这里有一个指向jsfiddle的链接：为了达到想要的效果，我需要动画的每个链接的高度，但我不确定如何做到这一点。CSS3转换令人困惑。O_o

浏览 3提问于2012-04-30得票数 0

回答已采纳

1回答

检测子组件外部单击的简单方法

javascript、html、angular

我希望根据变量的值展开和收缩子div组件，但是我希望能够单击该组件(在同级的父组件中)并折叠它。 // your click logic目标：当我单击子组件(hello)时，我希望它在尚未展开时展开，如果已经展开，则希望它收缩</

浏览 0提问于2019-03-06得票数 2

回答已采纳

1回答

使用未正确刷新的jquery - tiles调整Google Maps api v3 DIV的大小

google-maps、google-maps-api-3

我正在使用Google Maps api div创建一个可以调整大小的地图(使用jQuery切换来扩展和收缩v3 )。我使用的代码是：document.write('<a id="expandMap" href="#" target="_blank" title="Expand the map">+expand map</

浏览 0提问于2012-03-21得票数 6

2回答

React如何更改当前单击项的手风琴标题文本

javascript、html、reactjs、accordion

我正在制作一个简单的Reactjs手风琴应用程序，其中每个项目的折叠和扩展都是完成的。一个简单的要求是，我需要切换标题的文本，因为根据单击展开或收缩。如果我们单击任何一项，那么内容将显示在这种情况下，文本更改为收缩，因为手风琴被打开，因此收缩标题给出了手风琴的关闭。完整的工作示例： Accordion.jsimport

浏览 2提问于2020-08-31得票数 3

回答已采纳

1回答

"flex: 10%“与适应其大小的画布子一起工作不正常。

javascript、html、css、canvas

下面的示例创建页眉、画布和页脚。画布被告知填充页眉和页脚之间的空间。发生了以下情况：为什么画布不收缩，我如何使它收缩？ flex-flow: column; flex: 1 0 0%; height: 100%;} <divclass="main"

浏览 3提问于2021-08-25得票数 2

回答已采纳

1回答

画布到svg的动画翻译

javascript、svg、html5-canvas

所以我对云、静态云()和做了跟踪/路径，因为原始云()基本上有5条曲线，它们在旋转时展开和收缩。有什么更好的逻辑吗？任何关于如何思考这个逻辑的建议都是很棒的。使用SE应用程序的示例与上面的jsFi

浏览 5提问于2015-11-12得票数 1

回答已采纳

1回答

Vue模板呈现而不需要额外的

vue.js、vuejs2

我有一套非常非常简单的Vue组件，它们都能工作。这些都是在现有C#应用程序的基础上添加的简单内容。.js to .min.js是相当标准的，但我不知道如何将HTML编译成Vue呈现函数。我所发现的一切都涉及到大量的开销和，对于html->script转换来说，这

浏览 0提问于2019-05-06得票数 0

回答已采纳

1回答

文本编辑器值在React Js中消失。

javascript、html、reactjs、editor、accordion

Accordion.js {accordionData.map((item, index) => ( </Accordion></div> ->打开上面的链接 -&g

浏览 3提问于2020-09-01得票数 0

回答已采纳

1回答

我有两个元素(假设一个按钮和一个div)，其中一个元素是启动div扩展的触发器，它是由鼠标输入事件触发的(这可能是HoverIntent的合适候选者)。但是，当鼠标离开展开的div一段时间后，我需要它再次收缩，但是如果它们重新进入div，它应该不会收缩。大多数悬浮意图样式插件都会为我提供这个功能，但只有一个元素，并且作为一个元素控制扩展(button - mouseenter)和控制收缩(div -

浏览 1提问于2011-05-18得票数 1

回答已采纳

2回答

子零部件发送到父零部件和父零部件更新所有子零部件

javascript、vuejs2、vue.js

我正在尝试使用vue js 2创建一个包含可展开项的列表。我的想法是，当我单击一个项时，如果它还没有展开，我希望它展开(显示它的内容)，并关闭所有其他展开的元素。我已经创建了两个组件expandable-panel和expandable-item。我可以有多种类型的内容在里面，所以我想使用插槽。</expandable-item>我的应用程序和组件是

浏览 14提问于2017-02-22得票数 1

回答已采纳

1回答

如何在Vue中正确使用render函数？

javascript、vue.js

我刚刚开始使用render函数，遇到了一个问题。在呈现时，Home组件不显示在<template> <h1>Vue Router Demo App</h1> <router-linkclass="container"> </<e

浏览 2提问于2020-07-06得票数 0

1回答

Vue与引导-vue:在列表(v-for)中的任何时候防止多个展开的list -元素。

javascript、vue.js、vuejs2、bootstrap-vue

我使用vue和引导-vue以及b-折叠的特性，在本例中它用于v-for (List)。当我单击用于展开的新列表元素时，如何关闭展开的列表元素？index) in nluData">

浏览 1提问于2018-02-28得票数 0

回答已采纳

2回答

省略号(三个点)展开和折叠文本

html、css、angular

我想将额外的文本设置为三个点(...)省略号，当我单击这些点时，文本应该会展开和收缩。但使用代码时，文本只会被压缩，而不会在点击点时展开 display:inline-block; white-spaceimportant; } <div class="overflow" innerHTM

浏览 58提问于2019-03-26得票数 2

回答已采纳

1回答

是否调整Silverlight数据网格行的单元格高度？

c#、silverlight、datagrid、resize

我能够弄清楚如何使用鼠标扩展和收缩一列数据网格。但是在收缩和展开列之后，单元格的高度不会减小。谢谢AJ

浏览 0提问于2010-04-22得票数 2

1回答

动画化、缩小和展开javascript中嵌套div中元素子集的转换。

javascript、html、css、nested、transitions

我需要为嵌套的div集合中的元素子集动画化收缩和展开转换。膨胀很好，但是收缩器坏了。不收缩动画转换正是我想要的。<div</em

浏览 5提问于2017-06-17得票数 0

2回答

vue.js如何解决警告"<transition>只能在单个元素上使用“。

vue.js

我正在为我创建的组件使用转换，该组件在呈现视图上重复多次： <div<slide-y-down-transition group> v-for="comment in

浏览 4提问于2020-08-02得票数 1

回答已采纳

2回答

Angular2:如何并行运行两个动画？

angular、typescript、angular-ng-if

我有一个能膨胀/收缩的容器。容器中有一个元素，当容器膨胀时，它会逐渐消失，而当容器收缩时，元素就会淡出。注意到ngIf的使用。这是有意的，因为它破坏了动画序列末尾的元素。this.expanded; }模板： <div class="container"

浏览 1提问于2017-04-02得票数 10

回答已采纳

点击加载更多