floorplan里设置门旋转的动画

xiaomeirenjing

jozhi 发表于 2018-3-13 20:46
我按照你的做法  chrome直接消失不见@@

我的也是消失不见了。你在.css文件的每一句指令后面加上！important就好了。还有之前的那个transform-box: fill-box也加上。
.door-open{
  -webkit-transform: rotate(-45deg) !important;
  -webkit-transform-origin: 0 100% 0 !important;
  transform-box: fill-box !important;
}

jozhi

xiaomeirenjing 发表于 2018-3-19 15:27
这个没试过，如果两扇门是一个图标，那怎么控制其中一扇门的动画呢？如果两扇门是两个图标，那怎么设置他 ...

這就是我想了解的地方@@"
同一個傳感器可以控制兩個物件嗎?

xiaomeirenjing

jozhi 发表于 2018-3-13 20:46
我按照你的做法  chrome直接消失不见@@

.door-open{
  -webkit-transform: rotate(-45deg) !important;
  -webkit-transform-origin: 0 100% 0 !important;
  transform-box: fill-box !important;
}
注意在每句程序后面加上 ! important

jozhi

xiaomeirenjing 发表于 2018-3-19 15:35
.door-open{
  -webkit-transform: rotate(-45deg) !important;
  -webkit-transform-origin: 0 100% 0 ! ...

有...我已經做成功了
現在的問題是 我设置了一个双开门
用两个矩形做开门的动作
这样可以办的到吗?
同一個傳感器

xiaomeirenjing

jozhi 发表于 2018-3-19 15:52
有...我已經做成功了
現在的問題是 我设置了一个双开门
用两个矩形做开门的动作

那我觉得你这个只能用case语句了，当门窗传感器的状态是off的时候，显示关门的图标；当传感器的状态是on的时候，显示开门的图标。就跟根据不同天气显示不同的图标的原理一样

jozhi

xiaomeirenjing 发表于 2018-3-19 18:53
那我觉得你这个只能用case语句了，当门窗传感器的状态是off的时候，显示关门的图标；当传感器的状态是on ...

可以給個範例參考一下嗎XD

咸味土豆

killadm 发表于 2018-3-12 21:52
再来个三连拍展示一下floorplan的渣渣兼容性
分别是安静的edge、一本正经的chrome、调皮的firefox

太酷了，大神不发个帖子分享一下么。。

killadm

jozhi 发表于 2018-3-19 15:52
有...我已經做成功了
現在的問題是 我设置了一个双开门
用两个矩形做开门的动作

提供个思路
可以将两个门设置成不同的id（left,right），然后把两个门加到一组，组id设置为门磁的Entity id。
然后将左开右开的动画和transform-origin分别设置
.door-open .left {
  fill: 填充颜色;
  animation-name: 动画名称;
  animation-duration: 动画持续时间;
  transform-box: fill-box;
}

.door-open .right {
  fill: 填充颜色
  animation-name: 动画名称
  animation-duration: 动画持续时间
  transform-box: fill-box;
}
关闭同理

killadm

咸味土豆 发表于 2018-3-19 22:44
太酷了，大神不发个帖子分享一下么。。

非大神，发一下风扇的代码
floorplan.yaml

  - name: Fans
    entities:
      - fan.xiaomi_air_purifier_pro
    states:
      - state: 'on'
        class: 'fan-on'
      - state: 'off'
        class: 'fan-off'
    action:
      service: toggle

复制代码

CSS:

@keyframes rotation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}

#fan\.xiaomi_air_purifier_pro {
  transform-origin: center center;
}

.fan-on{
  fill: #bdf271 !important;
  -webkit-animation: rotation 2s infinite linear;
  transform-box: fill-box;
}

.fan-off{
  fill: #424242 !important;
}

复制代码

翻译中...

咸味土豆

killadm 发表于 2018-3-20 09:54
非大神，发一下风扇的代码
floorplan.yaml
[code]

底图风格不错，喜欢，谢谢了。