Question

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

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

索引文件摘录

<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 **/
}

Answer 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）到窗口的.move-left事件上的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;
}

Answer 2

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

例如

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

Answer 3

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

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

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

查看this answer。

在文档加载时使用CSS3过渡从右向左移动元素

3 个答案: