0

这个包为使用 lit 创建的动画元素提供了帮助：https ://github.com/lit/lit/tree/main/packages/labs/motion 。

该页面指出：

“此外，元素在最初渲染到 DOM 时以及被移除时都可以设置动画。”

我希望能够在安装时或在卸载之前为元素设置动画，但我找不到任何可以做到这一点的示例。

为了具体说明我想要实现的目标，它本质上是一个轮播式面板：

  • 我有一个parent包装 div，溢出设置为只显示一个childdiv。
  • 当一个函数在父级中运行时，我希望当前可见child的“飞离”到左侧，并被一个从右侧滑入的新函数替换。

我当然可以通过手动触发它而不破坏child向左飞的元素来实现这一点，但我试图了解是否有更整洁/更惯用的方式。

parent.ts

import { LitElement, html } from 'lit'
import { customElement, state } from 'lit/decorators.js'
import './child.ts';

@customElement('parent-element')
export class ParentElement extends LitElement {

  items = [ { color: "#f00" }, { color: "#0f0" }, { color: "#00f" } ]

  @state() currentItemNumber = 0

  changeItem = () =>
    this.currentItemNumber = (this.currentItemNumber + 1) % this.items.length;

  render() {
    return html`
      <div style="width: 80%; height: 300px; margin: auto; overflow-x: hidden;">
        <child-element color="${this.items[this.currentItemNumber].color}"></child-element>
      </div>
      <button @click="${this.changeItem}">Change Item</button>
    `
  }
}

child.ts

// imports here
@customElement('child-element')
export class ChildElement extends LitElement {

  @property() color = "#f00"

  render() {
    return html`
      <div class="container" style="background-color: ${this.color}; width: 100%; height: 100%;">
        Child
      </div>
    `
  }
}

我意识到我在上面所做的是更新同一child组件的颜色，而不是删除/替换它，但希望它可以让我对我正在尝试做的事情有一个基本的了解。

我是 lit 的新手，并且对 javascript 很陌生，所以这可能就像我误解了一些术语或一些基本的生命周期管理一样简单 - 所以非常感谢所有帮助！

4

0 回答 0