Question

我的CSS是这样的：

function showNoResults() {
  results.innerHTML = ''
  results.insertAdjacentHTML(
    'afterbegin',
    `<div class='no-results'>
          <h1 style="transform: translateX(0);">No results found :(</h1>
         </div>`
  )
}

.no-results h1 {
  transform: translateX(-100%);
  transition: all 0.2s linear;
}

<div id="results"></div>

<button onclick="showNoResults()">showNoResults</button>

文字显示但没有过渡

Answer 1

插入元素，然后更改transform属性以触发过渡。您应该在稍有延迟之后执行此操作，这就是我使用setTimeout的原因：

function showNoResults() {
  results.innerHTML = ''
  results.insertAdjacentHTML(
    'afterbegin',
    `<div class='no-results'>
          <h1 >No results found :(</h1>
         </div>`
  )
  setTimeout(function(){
    document.querySelector('.no-results h1').style.transform="translateX(0)";
  },1);
}

.no-results h1 {
  transform: translateX(-100%);
  transition: all 0.2s linear;
}

<div id="results"></div>

<button onclick="showNoResults()">showNoResults</button>

Answer 2

我建议使用动画，只要在将元素添加到dom时动画开始。然后，您可以动态附加具有此动画的元素，然后动画将运行。

您可以找到我刚刚解释的示例：https://jsfiddle.net/w6kqscgn/

p {
  animation: appear 2s;
}

@keyframes appear {
  from { 
    transform: translateX(-100%);
  }
}

Answer 3

一种不同的方法是使用另一个类来触发动画：

                    let items = this.getAggregation('items');
                    let itemsLength = items.length - 1,
                        j = 1;
                    if (itemsLength > 0) {
                        for (let i = 0; i < itemsLength; i++) {
                            this.insertAggregation('items',
                                new sap.m.IconTabSeparator({ icon: this.getSeparator() }),
                                j, true);
                            j = j + 2;
                        }
                    }

将元素插入HTML文档：

.no-results h1 {
   transform: translateX(0);
   transition: all 0.2s linear;
}
.no-results.active h1 {
   transform: translateX(-100%);
}

要触发动画，只需在需要时将类添加到showNoResults() { this.cache.results.innerHTML = '' this.cache.results.insertAdjacentHTML( 'afterbegin', `<div id="noresults" class='no-results'> <h1>No results found :(</h1> </div>` ) }元素中即可。

div

在insertAdjacentHTML之后无法进行过渡

3 个答案: