CSS 3-擴展CSS過渡

Question

當您通過鼠標輸入時，我正在嘗試縮放圖像，這是可行的。 我希望圖像可以輕松過渡逐漸放大。 我使用了輕松進出，但無法正常工作。 有什么建議么？

另外，我在jQuery代碼中兩次使用了addClass和removeClass。 有沒有辦法只使用一次？

謝謝！

 <style>
    .image {
      opacity: 0.5;
    }

    .image.opaque {
      opacity: 1;
    }

    .size{
    transform:scale(1.2);
    -ms-transform:scale(1.2); /* IE 9 */
    -webkit-transform:scale(1.2); /* Safari and Chrome */
    -webkit-transition: scale 2s ease-in-out;
    -moz-transition: scale 2s ease-in-out;
    -o-transition: scale 2s ease-in-out;
    -ms-transition: scale 2s ease-in-out;    
    transition: scale 2s ease-in-out;
     transition: opacity 2s;
      }
  </style>



 <script>
    $(document).ready(function() {

      $(".image").mouseenter(function() {
        $(this).addClass("opaque");
        $(this).addClass("size");
      });

      $(".image").mouseleave(function() {
       $(this).removeClass("opaque");
        $(this).removeClass("size");
      });

    });
 <div id="gallery">
    <h3>Gallery of images</h3>
    <img class="image" src="images/gnu.jpg" height="200px" width="250px">
    <img class="image" src="images/tiger.jpg" height="200px" width="250px">
    <img class="image" src="images/black_rhino.jpg" height="200px" width="250px">
    <img class="image" src="images/cape_buffalo.jpg" height="200px" width="250px">
  </div>

Answer 1

如果要使用jQuery而不是css：hover。 將比例函數移到另一個類。 如何編寫過渡也存在問題。

.size{
    -webkit-transition: 2s ease-in-out; //does not accept property like scale, opacity here
    -moz-transition: 2s ease-in-out;
    -o-transition: 2s ease-in-out;
    -ms-transition: 2s ease-in-out;    
    transition: 2s ease-in-out;
     transition: 2s;
      }

.scaledSize{
transform:scale(1.2);
-ms-transform:scale(1.2); /* IE 9 */
    -webkit-transform:scale(1.2); /* Safari and Chrome */    
}

修改您的jQuery代碼以添加和刪除此類。

演示

如果要使屬性具有不同的計時功能和持續時間動畫，則必須編寫單獨的CSS屬性： transition-property ， transition-timing-function ， transition-duration 。 像這樣：

.size{
    opacity: 0.5;
    transition-property: scale, opacity;
    transition-timing-function: ease-in-out, linear;
    transition-duration: 2s, 2s;
    }

演示

使用您的代碼，您可以嘗試：

<style>
    .image {
      transition-property: scale, opacity;
      transition-timing-function: ease-in-out, linear;
      transition-duration: 2s, 2s; 
      opacity: 0.5;
    }

    .image.opaque {
      opacity: 1;
    }

    .size{
    transform:scale(1.2);
    -ms-transform:scale(1.2); /* IE 9 */
    -webkit-transform:scale(1.2); /* Safari and Chrome */
   }
  </style>

 <script>
    $(document).ready(function() {

      $(".image").mouseenter(function() {
        $(this).addClass("opaque");
        $(this).addClass("size");
      });

      $(".image").mouseleave(function() {
       $(this).removeClass("opaque");
        $(this).removeClass("size");
      });

    });
 <div id="gallery">
    <h3>Gallery of images</h3>
    <img class="image" src="images/gnu.jpg" height="200px" width="250px">
    <img class="image" src="images/tiger.jpg" height="200px" width="250px">
    <img class="image" src="images/black_rhino.jpg" height="200px" width="250px">
    <img class="image" src="images/cape_buffalo.jpg" height="200px" width="250px">
  </div>