floorplan里设置门旋转的动画

xiaomeirenjing

想实现floorplan里当开关门时，门旋转的动画。
门的id是小米的门窗传感器。
门的图标是Inscape里画的一个矩形。
css代码：
.door-open{
  transform:rotate(45deg);
  transform-origin: 0 100% 0；
  -webkit-transform:rotate(45deg);
  -webkit-transform-origin: 0 100% 0；
}
但是运行时，门的图标不见了，并没有发生旋转的效果

killadm

用chrome试试，没准门飞了



更新：
如果真的是飞了的话，在css里加上transform-box: fill-box;试试，我ff下的问题解决了
实验性CSS属性，不支持IE,EDGE
参考https://developer.mozilla.org/en-US/docs/Web/CSS/transform-box

.door-open{
  transform:rotate(45deg);
  transform-origin: 0 100% 0；
  -webkit-transform:rotate(45deg);
  -webkit-transform-origin: 0 100% 0；
  transform-box: fill-box;
}

复制代码

翻译中...

killadm

再来个三连拍展示一下floorplan的渣渣兼容性
分别是安静的edge、一本正经的chrome、调皮的firefox


翻译中...

killadm

floorplan.yaml

  - name: Doors
    entities:
      - binary_sensor.door_window_sensor_158d0001e72cfc
    states:
      - state: 'off'
        class: 'door_closed'
      - state: 'on'
        class: 'door_open'

复制代码

floorplan.css

@keyframes rotate45 {
    100% {
        transform: rotate(45deg);
    }
}

@keyframes rotateReset45 {
    0% {
        transform: rotate(45deg);
    }
    100% {
        transform: none;
    }
}

.door_closed {
  fill: #80e5ff !important;
  animation-duration: 4s;
  animation-name: rotateReset45;
  transform-box: fill-box;
}

.door_open {
  fill: #e7376b !important;
  animation-duration: 4s;
  animation-name: rotate45;
  animation-fill-mode: forwards;
  transform-box: fill-box;
}

复制代码

transform-box: fill-box;添加前后对比
firefox chrome正常，edge依然不动。




翻译中...

czh_max

这个要学习，就是想搞floorplan给老人家用呢，可以更直观的展现出来。

xiaomeirenjing

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

firefox显示不了floorplan界面，edge不发生任何动作（除了改变颜色），chrome直接消失不见。加了transform-box也是这个效果。悲伤指数无穷大，看来我的兼容问题还蛮严重

2018.3.13 12:33
更新：原来不是不见了，是转的半径太大了，转出了画面，持续努力中

2018.3.13  12:56
又发现一个现象，旋转的时候图片会变得很大

2018.3.13  13:41
问题已解决。的确要加上transform-box:fill-box；前面之所以没有解决问题，是因为在css中每一句的后面都要加上！important
.door-open{
  -webkit-transform: rotate(-45deg) !important;
  -webkit-transform-origin: 0 100% 0 !important;
  transform-box: fill-box !important;
}

killadm

xiaomeirenjing 发表于 2018-3-13 10:47
firefox显示不了floorplan界面，edge不发生任何动作（除了改变颜色），chrome直接消失不见。加了transform ...

ff57以上需要做个修改才能显示


翻译中...

jozhi

xiaomeirenjing 发表于 2018-3-13 10:47
firefox显示不了floorplan界面，edge不发生任何动作（除了改变颜色），chrome直接消失不见。加了transform ...

我按照你的做法  chrome直接消失不见@@

jozhi

killadm 发表于 2018-3-13 01:01
floorplan.yaml
[code]  - name: Doors
    entities:

我想请问一下  如果我设置了一个双开门
用两个矩形做开门的动作
这样可以办的到吗?

xiaomeirenjing

jozhi 发表于 2018-3-16 08:51
我想请问一下  如果我设置了一个双开门
用两个矩形做开门的动作
这样可以办的到吗? ...

这个没试过，如果两扇门是一个图标，那怎么控制其中一扇门的动画呢？如果两扇门是两个图标，那怎么设置他们的ID都是门窗传感器呢？