Question

我正在尝试在两个不同的css类之间进行转换，其中唯一的区别是背景图像。

Vue代码：

<div id="flip-list-demo" class="demo">
    <transition-group name="flip-list" tag="ol">
      <div v-for="item, in items" class="licontainer" v-bind:key="item.text">
        <li :data-shares="item.shares" :data-pos="item.datapos">
          <a href="#">
        {{ item.text }}
        </a>
        </li>
        <transition name="fade">
          <div :id = "'icon' + item.uid" :class="item.icon"></div>
        </transition>
      </div>
    </transition-group>
  </div>

CSS：

ol .red, .yellow, .green {
  display: inline-block;
  width: 40px;
  height: 40px;
  position: relative;
  top: 50%;
  transform: translateY(-50%)
}

ol .yellow {
    transition: background-image 2s;
  background-image: Long SVG code;
}

ol .green {
  transition: background-image 2s;
background-image: Long SVG code;
}

ol .red{
  transition: background-image 2s;
    background-image: Long SVG code;
}

图标属性在Vue实例内动态更新，触发重绘并更改图标。

我的问题是，是否可以使用转换，特别是两个类之间的不透明度淡化？我没有添加或删除只更新类的项目，所以我在使用Vue过渡类时遇到了麻烦。

Answer 1

为什么不将类绑定到特定条件（请参阅Vue文档https://vuejs.org/v2/guide/class-and-style.html），然后使用CSS中的transition - 属性（https://www.w3schools.com/css/css3_transitions.asp）？

Answer 2

通过在背景图片之前的每个css类的顶部添加transition: background-image 2s;来解决此问题。

Answer 3

当您在dom中更改班级并需要过渡时，必须这样做

// hack test for working with events
#include <stdio.h>
#include <errno.h>
#include <stdlib.h>
#include <string.h>
#include <fcntl.h>
#include <err.h>
#include <libevdev-1.0/libevdev/libevdev.h>

#define COUNTOF(x)  (int) ( ( sizeof(x) / sizeof((x)[0]) ) )

static void setupKeyCodes(void);
static const char *printableEventType(int t);
static const char *keycodes[64 * 1024] = { 0 }; // hack

int main(void) {

    setupKeyCodes();

    const char *eventDevice = "/dev/input/event1";

    const int fd = open(eventDevice, O_RDONLY | O_NONBLOCK);

    if (fd < 0) errx(EXIT_FAILURE, "ERROR: cannot open device %s [%s]", eventDevice, strerror(errno));

    struct libevdev *dev;

    int err = libevdev_new_from_fd(fd, &dev);

    if (err < 0) errx(EXIT_FAILURE, "ERROR: cannot associate event device [%s]", strerror(-err));

    printf("Device %s is open and associated w/ libevent\n", eventDevice);
    do {
        struct input_event ev;

        err = libevdev_next_event(dev, LIBEVDEV_READ_FLAG_NORMAL, &ev);

        if (err == 0 && ev.type == EV_KEY)
        {
            printf("KEY: Value=%s; Code=%s\n",
                printableEventType(ev.value),
                keycodes[ev.code]);
        }
    } while (err == 1 || err == 0 || err == -EAGAIN);

    return 0;
}

// HACK: populate the whole array of possible keycodes with their strings
// so we can see what we're reading.

static void setupKeyCodes(void)
{
    for (int i = 0; i < COUNTOF(keycodes); i++)
        keycodes[i] = "-unknown-";

    // these from /usr/include/linux/input-event-codes.h

    keycodes[KEY_RESERVED] = "KEY_RESERVED";
    keycodes[KEY_ESC] = "KEY_ESC";
    keycodes[KEY_1] = "KEY_1";
    keycodes[KEY_2] = "KEY_2";
    keycodes[KEY_3] = "KEY_3";
    keycodes[KEY_4] = "KEY_4";
    keycodes[KEY_5] = "KEY_5";
    keycodes[KEY_6] = "KEY_6";
    keycodes[KEY_7] = "KEY_7";
    keycodes[KEY_8] = "KEY_8";
    keycodes[KEY_9] = "KEY_9";
    keycodes[KEY_0] = "KEY_0";
    // ... many many more
    keycodes[KEY_STOP_RECORD] = "KEY_STOP_RECORD";
    keycodes[KEY_PAUSE_RECORD] = "KEY_PAUSE_RECORD";
    keycodes[KEY_VOD] = "KEY_VOD";
    keycodes[KEY_UNMUTE] = "KEY_UNMUTE";
    keycodes[KEY_FASTREVERSE] = "KEY_FASTREVERSE";
    keycodes[KEY_SLOWREVERSE] = "KEY_SLOWREVERSE";
}

#define STRCASE(x)  case x: return #x

static const char *printableEventType(int t)
{
    switch (t)
    {
    STRCASE(EV_SYN);
    STRCASE(EV_KEY);
    STRCASE(EV_REL);
    STRCASE(EV_ABS);
    STRCASE(EV_MSC);
    STRCASE(EV_SW);
    STRCASE(EV_LED);
    STRCASE(EV_SND);
    STRCASE(EV_REP);
    STRCASE(EV_FF);
    STRCASE(EV_PWR);
    STRCASE(EV_FF_STATUS);
    default: return "-?-";
    }
}


<div :class="{active: true}" ></div>

Vue元素类转换

3 个答案: