CSS 使用 vanilla js 对动态添加的内容进行转换

Question

我正在使用路由器，特别是 Navigo。

我打算淡出现有内容，然后添加淡入的新内容。

我在路由器上配置的路由上更改了 'main' div 的内容。

<div id="main">
</div>

我目前的方法是检查 div 中是否有内容，然后向其中添加一个隐藏 class 并添加一个事件侦听器，以更改内容的动画结束。不幸的是，这似乎不起作用。添加隐藏 class 后，添加的第一个 div 会保留在那里而不会被删除，很可能是因为 animationend 事件不再被触发。

编辑：我已经更新了我的方法，淡出父内容，然后在动画结束时添加内容。同样为了兼容性，我已经包含了所有转换。

这是我目前的设置，大部分都是这样

然后通过js，

const routes: {path: string, content: string}[] = [{
        path: 'about',
        content: `<div class="about-content main-content">...</div>`
    },
    ...
]

const transitionEvent = (() => {
    var el: HTMLElement = document.createElement("faux");
  
    var transitions:Record<string, string> = {
      "transition"      : "transitionend",
      "OTransition"     : "oTransitionEnd",
      "MozTransition"   : "transitionend",
      "WebkitTransition": "webkitTransitionEnd"
    }
  
    for (let t in transitions){
      if (el.style[t] !== undefined){
        return transitions[t];
      }
    }
})();

const router = new Navigo('/');

const contentDom = document.getElementById('main');

routes.forEach(route => {
    router.on(route.path, () => {
        let temp = (e: Event) => {
            console.log(e);
            contentDom.removeEventListener(transitionEvent, temp, false);
            contentDom.innerHTML = route.content;
            contentDom.className = 'transition-in';
        };
        contentDom.addEventListener(transitionEvent, temp, false);
        contentDom.className = 'transition-out';
    })
})

最后是 css,

.main-content{
    visibility: visible;
    opacity: 1
        &.transition-in {
            animation: slide-up 1s ease-in-out;
        }

        &.transition-out {       
            animation: slide-up 1s ease-in-out;
            animation-direction: reverse;
        }
}
@keyframes slide-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

Answer 1

我终于解决了这个问题。我的错误是我在尝试动画上的 transitionend 事件。

将我的 css 更改为

.main-content{
    visibility: visible;
    opacity: 1
    transition: opacity 1s ease-in-out;
}

然后我的 js 改为设置不透明度，

routes.forEach(route => {
    router.on(route.path, () => {
        let temp = (e: Event) => {
            console.log(e);
            contentDom.removeEventListener(transitionEvent, temp, false);
            contentDom.innerHTML = route.content;
            contentDom.style.opacity = '1';
        };
        contentDom.addEventListener(transitionEvent, temp, false);
        contentDom.style.opacity = '0';
    })
})

解决了我的问题。

CSS 使用 vanilla js 对动态添加的内容进行转换

CSS Transitions on dynamically added content using vanilla js

html

javascript

css

css-animations