代码之家 › 专栏 › 技术社区 › bbsimonbb

在Vue中,如何对DOM元素进行批量更改?

vuejs2

bbsimonbb · 技术社区 · 8 年前

我在做一个动画,一个缩略图会放大,占据整个屏幕。第一步是获取元素,将其位置更改为绝对,并使用样式对象显式指定其当前占用的尺寸和位置。然后我做动画。

大多数情况下,它工作得很好,但我似乎得到了DOM渲染,捕捉处于中间状态的元素,它的位置更改为绝对,但维度没有设置。在Vue中,有没有一种方法可以将一个元素的一系列更新分组到一个批次中?

var me = this;
var outer = this.$refs.outer;
if (!this.vueStore.previewing) {
    var rect = outer.getBoundingClientRect();
    this.elStyle.height = rect.bottom - rect.top;
    this.elStyle.width = rect.right - rect.left;
    this.elStyle.top = rect.top;
    this.elStyle.left = rect.left;
    this.elStyle.zIndex = 100;
    this.elStyle.position = 'absolute';
    this.elStyle.transition = 'all 0.5s ease-in-out';
    setTimeout(function () {
        this.elStyle.top = this.vueStore.contentRect.top;
        this.elStyle.left = this.vueStore.contentRect.left;
        this.elStyle.height = this.vueStore.contentRect.bottom;
        this.elStyle.width = this.vueStore.contentRect.right;
    }, 300);
} else {...

1 回复 | 直到 8 年前

ittus 8 年前

你应该在一次内指定elStyle

var me = this;
var outer = this.$refs.outer;
if (!this.vueStore.previewing) {
    var rect = outer.getBoundingClientRect();
    me.elStyle = Object.assign({}, me.elStyle, {
      height: rect.bottom - rect.top,
      width: rect.right - rect.left,
      top: rect.top,
      left: rect.left,
      zIndex: 100,
      position: absolute
    })
    setTimeout(function () {
        me.elStyle = Object.assign({}, me.elStyle, {
          height: me.vueStore.contentRect.bottom - 50;,
          width: me.vueStore.contentRect.right,
          top: me.vueStore.contentRect.top,
          left: me.vueStore.contentRect.left,
        })
    }, 300);
}

推荐文章

4r60_ · 如何停止VueJS上的间隔?[副本]

4 年前

Park · Vuejs道具,路径较长

4 年前

Mathijs · vue-chartjs4中的混合气泡图和折线图

4 年前

roev · 大堆来自(物体)。forEach不使用vue。js

4 年前

haferje · Vue。用于计算属性重新渲染的js加载指示器

8 年前

Ready Dev · Axios一次发出多个请求(vue.js)

8 年前

JeanValjean · 如何在Vue中使用事件总线通过自定义事件传递数据。js 2

8 年前

dede.brahma · VueJs-元素UI el select:如何获取值父级和子级

8 年前

tzortzik · 如何使用vue路由器将对象作为道具传递?

8 年前

Tim · VueJS-迭代从AJAX调用返回的数据

8 年前