在加载文档时使用 CSS3 转换从右向左移动元素答案

【问题标题】：Moving an element from right to left using CSS3 transitions on load of the document在加载文档时使用 CSS3 转换从右向左移动元素
【发布时间】：2018-08-05 17:26:08
【问题描述】：

我想向包含来自角度控制器的文本的元素添加一个过渡属性。

我想在文档加载时将其从右向左移动。有没有办法做到这一点。这是我的示例代码。

索引文件摘录

<div class="logArena">

  <ul class="timeline">
    <li ng-repeat="log in changelogCtrl.logs | orderBy: '-dateObj'">
      <span class="direction-l">
        <span class="time-wrapper">
            <span class="time">
               {{log.date}}
            </span>
          </span>
      </span>

      <div class="direction-r">
        <div class="flag-wrapper">
          <div class="flag">

            <span id="axis">
              <span class="move-left">
                <strong>{{log.module}}</strong>&nbsp;<strong class="fa fa-long-arrow-right"></strong>&nbsp;{{log.subModule}}
              </span>
            </span>

          </div>
        </div>
        <div class="desc">
          {{log.desc}}
        </div>
      </div>
    </li>
  </ul>
</div>

CSS 除外（现在我尝试使用悬停，但它也不起作用，但我希望它在页面加载时自动从右到左。）

#axis:hover .move-left{
    transform: translate(350px,0);
    -webkit-transform: translate(350px,0); /** Safari & Chrome **/
    -o-transform: translate(350px,0); /** Opera **/
    -moz-transform: translate(350px,0); /** Firefox **/
}

【问题讨论】：

标签： angularjs css css-transitions

【解决方案1】：

使用CSS 动画并定义关键帧内的平移值。 forwards 值将使您的元素保持上次遇到的关键帧的样式。

CSS

.move-left {
    animation: moveleft 2s 1 normal forwards;
}

@keyframes moveleft {
   from { transform: translateX(0); }
   to   { transform: translateX(350px); }

}

codepen demo

这将等到该元素出现在DOM 上，但是，如果您需要等待完整的文档加载（包括图像和重资产），只需将一个类（例如.load）添加到@987654327窗口的load 事件上的@ 元素并仅在已应用该类时触发动画，因此JS 和CSS 选择器将是

Javascript

window.addEventListener("load", function(event) {
    document.querySelector('.move-left').classList.add('load');
});

CSS

.move-left.load {
    animation: moveleft 2s 1 normal forwards;
}

【讨论】：

【解决方案2】：

您可以将 CSS-3 的动画属性与translateX() 属性结合使用。

    .row {
        animation: 1s ease-out 0s 1 slide;
    }

    @keyframes slide {
        0%{ transform: translateX(100%);}
        100%{ transform: translateX(0%);}
    }

查看this answer。

【讨论】：

【解决方案3】：

您可以只使用 Jquery 和 .addClass 和 .removeClass。

例如

jQuery(document).ready(function($){
$('#axis').click(function(){
$('//What you want the class to be added too / Moved').addClass('move-left');
)};
)};

【讨论】：