组件简介：

一个简单的Salesforce LWC示例，名字叫做flashcard, 实现了一个交互式的单词卡片组件。

用户可以点击卡片来查看单词的定义，然后再次点击卡片来隐藏定义,每次点击卡片有动画翻转的效果。

(看似LWC, 实际上是CSS的复杂运用)

代码示例：

flashcard.html

<template>
    <div class="flashcard-container" onclick={handleToggleCard}>
      <div class={flipCardClass}>
        <!-- 正面 -->
        <div class="card-front">
          <p>{word}</p>
        </div>
        <!-- 背面 -->
        <div class="card-back">
          <p>{definition}</p>
        </div>
      </div>
    </div>
  </template>

flashcard.js

import { LightningElement, api, track } from 'lwc';

export default class Flashcard extends LightningElement {
  @api word = 'Hello World!'; // 默认单词
  @api definition = '你好 世界!'; // 默认定义
  @track isFlipped = false;// 初始状态未翻转

  get flipCardClass() {
    return this.isFlipped ? 'card flipped' : 'card';
  }

  // 卡片点击事件处理函数
  handleToggleCard() {
    this.isFlipped = !this.isFlipped; // 切换翻转状态
  }
}

flashcard.css

/* 容器样式，定义卡片的宽度、高度和3D效果 */
.flashcard-container {
    width: 600px;
    height: 350px;
    perspective: 1000px;/* 透视效果用于3D旋转 */
  }
/* 卡片样式，定义卡片的基本属性，包括翻转效果和圆角 */
  .card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;/* 保持3D效果 */
    transition: transform 0.4s;/* 添加过渡效果，实现平滑翻转 */
    border-radius: 10px; /* 添加圆角属性 */
  }

  .card-front,
  .card-back {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;/* 隐藏背面，实现翻转效果 */
    border-radius: 10px; /* 添加圆角属性 */
  }
/* 卡片正面样式 */
  .card-front {
    background-color: white;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
  }
/* 卡片背面样式 */
  .card-back {
    background-color: #e7fffb;
    color: black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transform: rotateY(180deg);/* 旋转180度，翻转到背面 */
  }
/* 翻转状态下的卡片样式 */
  .card.flipped {
    transform: rotateY(180deg);/* 旋转180度，翻转到背面 */
  }

flashcard.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>58.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__Tab</target>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
        <target>lightning__RecordPage</target>

    </targets>
</LightningComponentBundle>

父组件示例：

flashcardParent.html

<template>
  <div class="parent-container">
    <c-flashcard word="Hello World!" definition="你好 世界!"></c-flashcard>
  </div>
</template>