Hình dạng biểu tượng Morphing trong nút khi nhấp chuột - Thủ thuật CSS

Anonim

Ý tưởng ở đây là sử dụng một biểu tượng SVG trong một nút và hoán đổi biểu tượng đó cho một biểu tượng khác khi nút được nhấp. Một lần nhấp vào nút thường gợi ý rằng một hành động đã được thực hiện, vì vậy việc chuyển đổi các biểu tượng có thể là một cách chạm vào giao diện người dùng tốt để hiển thị sự thay đổi trong ngữ cảnh và xác nhận rằng hành động đã xảy ra.

Một trường hợp sử dụng khả thi có thể là một nút tải xuống. Biểu tượng trong nút ban đầu có thể chỉ ra rằng nút sẽ kích hoạt tải xuống nhưng chuyển thành dấu kiểm khi nút đã được nhấp.

Xem Pen MorphSVG trong Nút khi nhấp của Geoff Graham (@geoffgraham) trên CodePen.

Hãy tạo một đoạn mã hoàn thành mẫu này để chúng ta có thể sử dụng nó trong các ngữ cảnh tương tự khác.

Yêu cầu

Trong khi chúng tôi gửi đoạn mã này dưới dạng đoạn mã SVG, chúng tôi sẽ dựa vào TweenMax của GSAP, là một thư viện JavaScript đặc biệt để tạo hoạt ảnh cho SVG và MorphSVG, là một thành phần của TweenMax.

Vâng, SVG thực sự có hỗ trợ gốc cho các hình ảnh động cho phép chúng tôi thực hiện điều tương tự. Tuy nhiên, với việc hỗ trợ SMIL giảm dần trong các phiên bản tương lai của trình duyệt WebKit và Blink và hoàn toàn thiếu hỗ trợ trong IE và Edge, GSAP trở thành một lựa chọn thay thế hấp dẫn hơn nhiều.

Hãy đốt cháy chúng và xây dựng cho chúng tôi một khuôn mẫu!

Bước 1: Chọn SVG Shapes

Chúng ta sẽ hoán đổi một hình dạng này cho một hình dạng khác. Các hình dạng được sử dụng cho đoạn mã này đến từ IcoMoon, có rất nhiều biểu tượng vector miễn phí, nhưng bạn cũng có thể tự tạo cho mình. Dù bằng cách nào, hãy chuẩn bị hình dạng của bạn và thêm chúng vào HTML bên trong phần tử nút.

  Download

Bước 2: Tạo kiểu cho Nút và SVG

Chúng ta có thể thiết lập CSS tiếp theo. Hầu hết các kiểu trong ví dụ của chúng tôi đều dành riêng cho bản demo. Đây là mức tối thiểu cần thiết để làm cho chức năng này hoạt động.

Lưu ý rằng phần quan trọng đang ẩn hình dạng mà chúng ta đang biến đổi thành theo mặc định. Chúng tôi làm điều này vì chúng tôi cần cả hai hình dạng trong DOM cho MorphSVG để hoán đổi hình dạng này cho hình dạng kia, nhưng chúng tôi không thể hiển thị cả hai hình dạng cùng một lúc. Điều đó có nghĩa là chúng tôi ẩn hình dạng thứ hai và để MorphSVG làm việc kỳ diệu của nó để hiển thị nó khi cần.

/* The main SVG */ .button-icons ( width: 1.25em; ) /* The individual icons */ .icon ( fill: #fff; ) /* We hide the checkmark by default */ #checkmark ( visibility: hidden; )

Bước 3: Các SVG hùng mạnh của Morphin!

Đây là lúc TweenMax và MorphSVG phát huy tác dụng. Mã đầy đủ cho ví dụ được cung cấp bên dưới, nhưng nó tuân theo tập lệnh chung sau:

  • Xác định một vài biến để bắt đầu để chúng ta có thể tham khảo chúng trong suốt mã mà không cần phải viết chúng ra mỗi lần:
    • icons: phần tử SVG đầy đủ
    • button: nút (hoặc liên kết) chứa các hình dạng của chúng ta
    • buttonText: văn bản bên trong nút
    • buttonTL: Lệnh MorphSVG để hoán đổi biểu tượng tải xuống cho biểu tượng dấu kiểm
  • Này, JavaScript, vui lòng để ý nút được nhấp và phát hoạt ảnh MorphSVG chuyển tiếp và ngược lại khi nhấp chuột thay thế.
  • Ồ và, này JavaScript, cũng hoán đổi văn bản nút khi nút được nhấp.
  • Cảm ơn bạn, JavaScript
// We're going to select some things and make them variables var select = function(s) ( return document.querySelector(s); ), icons = select('#icons'), button = select('.button'), buttonText = document.getElementById("button-text") // Morph the Download icon into the Checkmark icon var buttonTl = new TimelineMax((paused:true)); buttonTl.to('#download', 1, ( morphSVG:(shape:'#checkmark'), ease:Elastic.easeInOut )) // On button click, play the animation button.addEventListener('click', function() ( if (buttonTl.time() > 0) ( buttonTl.reverse(); ) else ( buttonTl.play(0); ) )) // On button click, swap out the button text button.addEventListener('click', function() ( if (button.classList.contains("saved")) ( button.classList.remove("saved"); buttonText.innerHTML = "Download"; ) else ( button.classList.add("saved"); buttonText.innerHTML = "Saved!"; ) ), false);

Bản giới thiệu

Sau đây là bản demo về mã mà chúng tôi đã đề cập:

Xem Pen MorphSVG trong Nút khi nhấp của Geoff Graham (@geoffgraham) trên CodePen.

Người giới thiệu

  • GreenSock MorphSVG: Tài liệu sử dụng plugin.
  • Cách thức hoạt động của SVG Shape Morphing: Chris đã xuất bản cùng một khái niệm này bằng cách sử dụng SMIL và cung cấp một nền tảng đẹp cho mẫu này.
  • Happy / Sad Pen: Bản trình diễn của Chris Gannon đã giúp xây dựng hoạt ảnh cho mẫu này.