使用javascript激活css動畫/翻譯

Question

我試圖擺脫javascript動畫並使用CSS動畫代替。 我目前正在使用jQuery的動畫功能。

我在這個網站上看到了一堆精彩的css動畫。 如：

.demo1 {
  -webkit-transition:all .5s ease-out;
  -moz-transition:all .5s ease-out;
  -ms-transition:all .5s ease-out;
  -o-transition:all .5s ease-out;
  transition:all .5s ease-out;
}

.demo1:hover {
  -webkit-transform:translate(0px,10px);
  -moz-transform:translate(0px,-10px);
  -ms-transform:translate(0px,-10px);
  -o-transform:translate(0px,10px);
  transform:translate(0px,-10px);
}

我無法弄清楚的是如何以編程方式激活這些動畫。 因此，例如，如何通過調用elem.translate()來轉換元素，而不是hover ？

Answer 1

我可能會誤解你的要求，但我認為你可能會錯誤地認為“翻譯”在一個元素上是什么。 DOM元素具有名為“translate”的屬性，以及css屬性“translate”。 但是，元素屬性“translate”只是一個布爾標志，指定元素中的文本是否應該在語言意義上進行翻譯 ，它不是可調用的函數，與css屬性無關。

除此之外，還有很多方法可以通過編程方式翻譯元素。 其他一些人已經很好地了解了如何使用jQuery做到這一點。 如果您不想使用jQuery，您仍然可以手動添加和刪除類（對於樣式也是如此）。

---

這是我為課程添加/刪除而准備的一個例子 。 它非常簡單，但這里是類修改的相關代碼：

.translator {
  -webkit-transform:translate(0px,100px);
  -moz-transform:translate(0px,-100px);
  -ms-transform:translate(0px,-100px);
  -o-transform:translate(0px,100px);
  transform:translate(0px,-100px);
}
...
function move_box() {
  var the_box = document.getElementById("the-box");
  if (the_box.classList.contains("translator")) {
    the_box.classList.remove("translator");
  } else {
    the_box.classList.add("translator");
  }
}

通過應用該類，動畫將開始（並刪除它將反轉它）。 這種情況可能會發生很多次。

一個重要的注意事項：對於這個例子，我仍然有“過渡：所有.5s緩出”的風格。 在任何事情發生之前應用於div。 這只是一個通用默認值，用於控制動畫效果如何應用於元素。 這有幾種不同的方法，但為了簡單起見，我將把它留下來。

否則，您可以直接添加樣式，如下所示 ：

function move_box() {
  var the_box = document.getElementById("the-box");
  set_translate(the_box, 100);
}

function set_translate(e, pix) {
  e.style["-webkit-transform"] = "translate(0px, "+ pix +"px)";
  e.style["-moz-transform"] = "translate(0px, -" + pix +"px)";
  e.style["-ms-transform"] = "translate(0px, -" + pix + "px)";
  e.style["-o-transform"] = "translate(0px, " + pix  + "px)";
  e.style["transform"] = "translate(0px, -" + pix + "px)";
}

這里沒有太復雜 - 它通過操縱元素上的樣式直接設置每個相關元素。 和以前一樣，它依賴於一個單獨的類來指定過渡樣式。

---

就個人而言，我認為課程的增加/刪除是遠遠優越的。 從技術上講，對樣式的直接修改更靈活，但如果這是你的目標，你應該使用像jQuery中文這樣的好庫（如評論中所述）。 但是，如果您只是希望能夠以編程方式應用一些預制效果，則動態修改類是一個很好的解決方案。

Answer 2

如果你已經有了CSS，你可以通過執行$('.demo1').trigger('hover');在jquery中觸發它$('.demo1').trigger('hover'); 模擬懸停事件，或者從.demo:hover更改你的css選擇器.demo:hover到.class-name ，只需使用$('.demo').addClass('class-name');添加該類$('.demo').addClass('class-name');

Answer 3

您可以使用jQuery.css.fn來應用css規則。

$('.demo1').click(function(){
    $(this).css({
        transform: 'translate(0px,-10px)'
    });
});

或者向元素添加一個類：

$('.demo1').click(function(){
    $(this).toggleClass('translate');
});


.translate {
  -webkit-transform:translate(0px,10px);
  -moz-transform:translate(0px,-10px);
  -ms-transform:translate(0px,-10px);
  -o-transform:translate(0px,10px);
  transform:translate(0px,-10px);
}