多个元素的过渡

对于原生标签可以使用 v-if/v-else 。最常见的多标签过渡是一个列表和描述这个列表为空消息的元素：

<transition><table v-if="items.length > 0"><!-- ... --></table><p v-else>Sorry, no items found.</p>
</transition>

可以这样使用，但是有一点需要注意：

当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。即使在技术上没有必要，给在 <transition> 组件中的多个元素设置 key 是一个更好的实践。

示例：

<transition><button v-if="isEditing" key="save">Save</button><button v-else key="edit">Edit</button>
</transition>

在一些场景中，也可以通过给同一个元素的 key 特性设置不同的状态来代替 v-if 和 v-else，上面的例子可以重写为：

<transition><button v-bind:key="isEditing">{{ isEditing ? 'Save' : 'Edit' }}</button>
</transition>

使用多个 v-if 的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡。例如：

<transition><button v-if="docState === 'saved'" key="saved">Edit</button><button v-if="docState === 'edited'" key="edited">Save</button><button v-if="docState === 'editing'" key="editing">Cancel</button>
</transition>

可以重写为：

<transition><button v-bind:key="docState">{{ buttonMessage }}</button>
</transition>

// ...
computed: {buttonMessage: function () {switch (this.docState) {case 'saved': return 'Edit'case 'edited': return 'Save'case 'editing': return 'Cancel'}}
}

过渡模式

同时生效的进入和离开的过渡不能满足所有要求，所以 Vue 提供了过渡模式

in-out：新元素先进行过渡，完成之后当前元素过渡离开。
out-in：当前元素先进行过渡，完成之后新元素过渡进入。

用 out-in 重写之前的开关按钮过渡：

<transition name="fade" mode="out-in"><!-- ... the buttons ... -->
</transition>

Vue多个元素的过渡相关推荐

Vue.js 进入/离开列表过渡
概述 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS 动画库,如 Animate. ...
【Vue】Vue全家桶（三）Vue组件通信+Vue组件插槽+动画与过渡+使用vue-cli解决Ajax跨域问题
1 Vue组件通信 1.1 组件间通信基本原则不要在子组件中直接修改父组件的状态数据数据在哪, 更新数据的行为(函数)就应该定义在哪 1.2 vue 组件间通信方式 props vue 的自定义事 ...
10.Vue.js前端框架：过渡
1.过渡的作用 Vue.js 内置了一套过渡系统,该系统是 Vue.js 为 DOM 动画效果提供的一个特性.在插入.更新或者移除 DOM 时可以触发 CSS 过渡和动画,从而产生过渡效果. 2.单元 ...
vue 拖拽元素到任意位置
vue 拖拽元素到任意位置使用vue-drag-it-dude组件 npm install vue-drag-it-dude --save 参考地址:https://github.com/xzqyu ...
Vue的包裹元素标签template
在此,可以把一个元素当做不可见的包裹元素. 常用场景如下: 1,比如说当v-for和v-if要在同一个元素上时,而vue又不允许这样使用,这时而又不想新增一个标签,这里,就可以在v-for的外层使用 ...
Vue中v-for必须在vue实例对应元素下的子元素中循环渲染数据
异常信息 Cannot use v-for on 1 stateful componentroot element because it renders multiple elements 翻译大意: ...
vue 获取当前元素的父元素_vue获取dom元素内容
通过ref来获取dom元素在vue官网上对ref的解释 ref 被用来给元素或子组件注册引用信息.引用信息将会注册在父组件的 $refs 对象上.如果在普通的 DOM 元素上使用,引用指向的就是 D ...
Vue获取DOM元素并修改属性
Vue获取DOM元素 Vue获取DOM元素有两种方法直接给相应的元素加id,然后再使用document.getElementById("id");获取使用ref,给相应的元素加 ...
Vue 获取DOM元素，给DOM增加事件的特殊情况
Vue 获取DOM元素 ,给DOM增加事件的特殊情况给标签绑定ref属性使用this.$refs.xxx 获取原生的jsDOM对象 ref属性值不能重名 Vue.component('subCom ...
八.vue获取dom元素
vue获取dom元素方法一:直接给相应的元素加id,然后再document.getElementById("id");获取,然后设置相应属性或样式方法二:使用ref,给相应的元 ...

Vue多个元素的过渡

多个元素的过渡

过渡模式

Vue多个元素的过渡相关推荐

最新文章

热门文章