jquery - 使用 css3 转换为鼠标移出添加不同的转换速度

Question

我正在制作一个基于鼠标方向的画廊，我希望鼠标移出时过渡更快，但我无法使用此代码锻炼如何做到这一点 JSfiddle demo .我已经将 img 和信息面板设置为不同的过渡样式，但我也无法设置 out 样式？

$(".gallery li").on("mouseenter mouseleave", function (e) {

      var w = $(this).width();
      var h = $(this).height();

      var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
      var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);

      var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;

      /** check for direction **/
      switch (direction) {
      case 0:
          // direction top
          var slideFrom = {
              "top": "-100%",
              "right": "0"
          };
          var slideTo = {
              "top": 0
          };
          var imgSlide = "0, 100";

          break;
      case 1:
          // direction right
          var slideFrom = {
              "top": "0",
              "right": "-100%"
          };
          var slideTo = {
              "right": 0
          };
          var imgSlide = "-100, 0";

          break;
      case 2:
          // direction bottom
          var slideFrom = {
              "top": "100%",
              "right": "0"
          };
          var slideTo = {
              "top": 0
          };
          var imgSlide = "0, -100";

          break;
      case 3:
          // direction left
          var slideFrom = {
              "top": "0",
              "right": "100%"
          };
          var slideTo = {
              "right": 0
          };
          var imgSlide = "100, 0";

          break;
      }

      if (e.type === 'mouseenter') {
          var element = $(this);

          element.find(".info").removeClass("transform").css(slideFrom);
          element.find("img").addClass("transform-img").css("transform", "matrix(1, 0, 0, 1," + imgSlide + ")");

          setTimeout(function () {
              element.find(".info").addClass("transform").css(slideTo);
          }, 10);


      } else {
          var element = $(this);

          element.find(".info").addClass("transform").css(slideFrom);
          element.find("img").removeClass("transform-img").css("transform", "matrix(1, 0, 0, 1," + imgSlide + ")");

          setTimeout(function () {
              element.find("img").addClass("transform-img").css("transform", "matrix(1, 0, 0, 1,0,0)");
          }, 10);

      }
  });

Answer 1

在 CSS 中，您可以使用 :hover 定义不同的过渡持续时间

.transform { /* mouseleave */
    transition: all 200ms cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
li:hover .transform { /* mouseenter */
    transition-duration: 400ms;
}

当然有前缀。