JsView

# CSS3 样式表

JsView引擎不是浏览器，只是渲染处理对接到了当前流行的vue3.0/react处理框架，所以CSS样式对接了一部分，并逐步完善，但评估为影响性能的CSS不准备对接，例如: border圆角配置之外的大多数用法。

【注意】 Vue的css style样式不支持伪类

当前支持的css属性一览:

# 【=====布局样式=====】

  • display:

    固定为 absolute，所以主要的布局系统是父子节点左上角基准的绝对布局系统。
    特别说明: 在一些小的子场景下也可以通过JsvFlexDiv容器组件，来完成flex方式的布局，但需要注意flex布局在性能上有略微降低，flex组件的具体使用说明见点击进入 JsvFlexDiv组件说明

  • top

  • left

  • width

  • height

  • visibility

  • overflow: 支持设置为 'hidden' 后，对显示区域进行裁剪

  • objectfit:

    图片标签<img>，对横纵比展示方式的调整，具体支持值为 "fill" 或者 "contain"

  • transform: 变形处理只支持以下变化: translate3d, rotate3d, scale3d, skew

  • transformOrigin

  • zIndex: 同级元素的z-index可调，不支持全局z-index

# 【=====图片样式=====】

图片的格式支持jpg(jpeg), png, gif, webp(静态和动态都可以)

  • backgroundColor:

    用于<div>纯色方块展示，支持格式是4种: #AARRGGBB #RRGGBB rgba(rrr,ggg,bbb,a) rgb(rrr,ggg,bbb)

  • backgroundImage:

    用于使用<div>来展示图片

    支持输入url以及 linear-gradient 两种形式。

    对于linear-gradient的格式样例如下所示(方向目前只支持to的写法，颜色格式同backgroundColor的四种):

    linear-gradient(to left bottom, rgba(255, 0, 0, 1), rgba(0,255,0,1), rgba(0,0,255,1))

  • borderRadius

    用于<div>和<img>来展示圆角，四个圆角同一值写法为 borderRadius: "XX", 在老版本(0.9版本)中，注意尺寸中要带有"px"

    四个角分别设置的写法: "XX XX XX XX", 以单一空格隔开， 在老版本(0.9版本)中，注意尺寸中要带有"px", 写为 "XXpx XXpx XXpx XXpx"

    对应方位为"topLeft topRight bottomRight bottomLeft"

# 【=====文字样式=====】

  • width/height: 文字节点中，width和height至少要给一个，否则无法显示。

  • color: 支持格式是4种: #AARRGGBB #RRGGBB rgba(rrr,ggg,bbb,a) rgb(rrr,ggg,bbb)

  • lineHeight: 在老版本(0.9版本)中，注意尺寸中要带有"px"，例如写为"30px"

  • whiteSpace:

    "nowrap": 强制区域描画文字时不自动换行

    "normal": 区域描画文字时，自动换行，并且尽量保持英文单词不中断

    "pre-wrap": 区域描画时，自动换行，不用保持英文单词不中断的特性

    其余值不支持

  • fontFamily

  • fontSize: 注意不用带有"px"信息

  • fontStyle: 是否为斜体，斜体则设值为"italic"

  • fontWeight: 是否为加粗，加粗则设值为"bold"

  • textAlign: 水平对其方向，可选 "left", "center", "right"

  • textShadow: 参考w3cSchool内容 (opens new window)

  • textOverflow: 参考w3cSchool内容 (opens new window)

  • WebkitTextStroke:

    文字空心处理，格式 WebkitTextStroke: <length> <color>

    color同文字color设置，只支持4种写法

# 【=====动画样式=====】

  • transition:

    只支持 left, top, width, height, transform 这几个值进行transition，

    其中 width, height主要用于 NinePatch 处理效果，而非scale变化效果。

  • transform/transformOrigin:

    只支持 keframes 动画，keyFrames内容的配置也仅支持 left, top, width, height, transform(含transformOrigin)和opacity。

    同时，transform同静态transform的支持内容相同，只支持 translate3d, rotate3d, scale3d, skew 变化(可以组合变化)

    另外需要注意的是需要做动画的属性必须在每一帧中都有定义, 在中间帧省略属性会导致动画异常

  • animation:

    字段的格式

    animation: [animation-name] [animation-duration] [animation-timing-function] [animation-delay] [animation-iteration-count] [animation-fill-mode]

    animation-name:
    必填，固定为第1位，指定动画的名称，对应于使用@keyframes定义的动画名称, 目前只支持单个keyframe

    animation-duration:
    必填，固定为第2位，动画时长信息，写法为 1s 代表动画时长为1秒

    animation-timing-function:
    选填，动画的时间函数，默认为linear，支持ease-in/ease-out/cubic-bezier

    animation-delay:
    选填，动画延迟启动，写法为 1s 或者 1000ms

    animation-iteration-count:
    选填，动画的重复次数，写法为 infinite 或者具体数值

    animation-fill-mode:
    暂时不支持，若想达到同样效果，可以做一个 @animationend 回调，并在里面设置transform为动画的最后状态

    填写举例:
    animation:'SwiperAnimation 0.5s cubic-bezier(0.42, 3.96, 0.62, 0) 300ms 2'
    代表: 使用Keyframe:SwiperAnimation，动画时长0.5秒，速度进度为贝塞尔曲线，延迟300毫秒启动，运行两次

    ============= 分割线 =============

    通过keyframe动态注入关键值动画，然后anmation中可以使用，注意关键帧动画中的transform和transformOrigin要符合上条的限制内容

    keyframe动态注入的方案:

    <script setup>
  import { getKeyFramesGroup } from "jsview";
  import { onBeforeUnmount } from "vue";
  
  // 拿取group句柄
  const styleShell = getKeyFramesGroup();

  // 动态注入规则, 注意 some-anim-translate 是全局的, 不要重名
  styleShell.insertRule("@keyframes some-anim-translate \
    {from {transform: translate3d(-100%, -50%, 0);} \
    to {transform: translate3d(100%, 50%, 0);}}");

  // 注入规则后，就可以在style.animation 中使用 some-anim-translate 了，
  // 使用方法为 animation:"some-anim-translate 1s infinite"

  // 注意unmount时的销毁
  onBeforeUnmount(() => {
    styleShell.removeRule("some-anim-translate");
  })
</script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20

# 【=====特殊样式=====】

  • class:

    Vue3.0: 支持 style scoped 中配置的class样式名，以及 JsvStyleClass和JsvTextStyleClass

    React: 只支持使用ES6对象声明的class(JsvStyleClass和JsvTextStyleClass)。具体用法请参照样例: classNameDemo

  • transformStyle:

    参照 FlipCard.vue 样例，可选值为:"flat","preserve-3d"

    与 backfaceVisibility perspective perspectiveOrigin 一起配合，用于支持3d卡牌旋转

  • backfaceVisibility:

    参照 FlipCard.vue 样例，可选值: "visible", "hidden"

    与 transformStyle perspective perspectiveOrigin 一起配合，用于支持3d卡牌旋转

  • perspective:

    参照 FlipCard.vue 样例，与 transformStyle backfaceVisibility perspectiveOrigin 一起配合，用于支持3d卡牌旋转

  • perspectiveOrigin:

    参照 FlipCard.vue 样例，与 transformStyle backfaceVisibility perspective 一起配合，用于支持3d卡牌旋转

# 【=====注意事项=====】

  • overflow:

    • 当overflow设置为hidden时, 不要同时设置backgroundImage/backgroundColor

  • keyframes:

    • 对于width/height的keyframe控制，要使用数值来表示每个阶段值，且不带px后缀，不能使用%(left/right可以使用%)
      例如: "keyframes wides {0% { width: 0; } 100% { width:200; }}"

  • img 的 width/height:

    • 已经支持img标签根据图片尺寸进行尺寸自适应，需要把width/height设置成undefined/null/或者不设置，但不能设置成0。
      设置成0时，此图片不显示
Last Updated: 9/30/2024, 11:05:25 AM

← CSS 预处理器 →