Tạo hiệu ứng khi ẩn hiển các thành phần trong 1 khối div?

Chien_Dang · January 8, 2018, 11:44am

Mình quên mất là có thể dùng javascript, bạn có thể tham khảo cách của @superthin, cách của mình là dùng css.

hungaya · January 8, 2018, 12:05pm

Về toggle menu, mình có cách sử dụng CSS thuần.
Tạo 1 checkbox rồi ẩn nó đi. Vị trí checkbox và vị trí 3 gạch ngang trùng nhau. Menu xuất hiện hay không tuỳ vào trạng thái của checkbox. Nếu checkbox check mở menu, không check đóng menu.
Cách này chỉ phù hợp khi animation mở menu tương tự animation đóng, cũng chỉ có 2 trạng thái đặt animation (checked, not checked)

Cách tổng quát, dễ custom vẫn cần phải có 1 JS Animation Module riêng, linh hoạt giữa việc gắn CSS animation hay JS animation, lợi về maintain.

hell6w9rld · January 8, 2018, 1:58pm

mình áp dụng thử cách của bạn, thay đổi độ rộng của div cần cẩn, rồi thêm transition để cho mượt
toàn bộ thành phần trong div main-left html cần ẩn, ví dụ ở đây có 2 cái là profile, nav

<div class="main-left" id="hidden-main-left">
        <div class="profile">
            <p>profile</p>
        </div>
        <div class="nav">
            <p>nav</p>
        </div>
</div>

button để bật ẩn hiện ( 3 gạch)

<button type="button" class="button-toggle" onClick="hiddenMainLeft();">
		  <i class="icon-menu"></i>
</button>

css

  .main-left {
  flex: 0 0 230px; /* don't grow, don't shrink, stay fixed at 230px */
  min-height: 100vh;
  background: #222d32;
  transition: 0.5s;
}

.hidden {
  flex: 0 0 0px; 
}

js

function hiddenMainLeft() {
   var left = document.getElementById('hidden-main-left');
   if (left.getAttribute('class') == 'main-left') {
   		// if (hidden.style.display === 'none') hidden.style.display = 'block';
   		left.setAttribute('class', 'main-left hidden');
   }
   else {
   		left.setAttribute('class', 'main-left');
   		// hidden.style.display = 'none';
   	}
}

tuy nhiên đây chỉ mới giải quyết được cái nền, nó sẽ ẩn hiện mượt, nhưng thành phần bên trong vẫn chưa ẩn được, mình dùng lai display: none cho từng thành phần thì lại mất hiệu ứng trượt như ở trên bạn đã nói, giải pháp nào không nhỉ
khi ẩn phần màu xám đi thì element bên trong mình k biết xử lý ntn để vẫn giữ được hiệu ứng

mình thử cách setInterval và setTimeout thì thấy cách hiển thị không đúng ý mình muốn

hungaya · January 8, 2018, 2:02pm

Kết hợp width: 0 và opacity: 0
Nên thay class hidden thành main-left-hidden để không conflict về sau

hell6w9rld · January 8, 2018, 2:10pm

như thế sẽ mất hiệu ứng từ từ trượt vào của phần màu xám, bụp phát nó vào luôn, bụp phát ra luôn, quay về như ban đâu
bỏ display: none thêm mỗi opacity: 0;
thì ra thế này

hungaya · January 8, 2018, 2:17pm

Vì do right là background luôn nên không biết làm thế nào. Right là background thì nó không di chuyển, chỉ có left di chuyển.

Trường hợp left, right đồng thời di chuyển thì có 1 parent chứa left và right. Set background-color cho parent, background color: white cho right, left: background-color: transparent.
Animation thì thay translate và scale đồng thời cả left vả right. Left gắn thêm opacity để ẩn hiện text.

<div class="container container-root container-parent">
  <!-- LEFT MENU -->
  <nav class="nav nav-left">
  </nav>

  <!-- RIGHT CONTAINER -->
  <section class="section-main">
    <div class="container"></div>
  </section>
</div>

hell6w9rld · January 8, 2018, 2:19pm

mình dùng flexbox dàn layout, mình tương 2 item (right, left) nằm trên 1 trục thì nó nằm liền nhau chứ

hungaya · January 8, 2018, 2:26pm

Layout là initial state, thay đổi layout khó kiểm soát.
Khi load trang web, browser đọc các layout, render các box. Khi đã render rồi, các box đã có kích thước cố định. Chỉ cần transform trên các box có kích thước cố định.

hell6w9rld · January 8, 2018, 2:27pm

mình sửa lại như bạn nói, nhìn có vẻ ổn, nhưng lại phát sinh ra 1 cái là, mớ text nav, profile chỉ bị mờ đi, chứ k bị ẩn, nên nút button bị nó đè lên, bấm chính giưa k bấm được, bấm vào mép ngoài thì được, click đúp vào chỗ đó sẽ ra google translate cho chữ nav

tntxtnt · January 8, 2018, 2:33pm

cho nó position fixed rồi left: -300px là nó biến đi thôi

vọc cái này thử nè

hungaya · January 8, 2018, 2:36pm

Cách ẩn chữ width: 0 hoặc height = 0;
Khi có thẻ vẫn visible trong DOM, nhưng do diện tích hiển thị = 0 nên không nhận event nào.

hungaya · January 8, 2018, 2:38pm

Cái đó phần Right cố định rồi. Vừa di chuyển menu vừa di chuyển main content mà @@

tntxtnt · January 8, 2018, 2:41pm

bấm hiện ra cái menu left thì cần gì dòm bên content nữa, với lại muốn responsive thì bên phone nó ép cái content right xẹp lép luôn à… làm cái menu left chạy ra chạy vô là được rồi. Design lại toàn bộ html đi ahihi

hell6w9rld · January 8, 2018, 2:52pm

cái này mình đạng làm cho màn máy tính, chưa có responsive, khi reponsive cho di động hoặc khi kéo trình duyệt bé lại thì left sẽ nằm ngang trên right, mình dàn layout bằng flexbox, item left và right nằm cạnh nhau theo trục x, khi màn bé, left và right sẽ nằm liền nhau theo trục y

hell6w9rld · January 8, 2018, 2:54pm

đúng là có 1 cái class main-left-inner là con của main-left, mình dùng để fixed cái cột bên trái, vì dùng flexbox nó không có fixed item, nếu fixed là hỏng flexbox
có vẻ như opacity các thành phần bên trong với đặt lại độ rộng cho main-left nhưng nội dung chứa trong main-left-inner vẫn còn đó

nhưng cái kiểu mờ đi bằng opacity này, sau còn có các thành phần có chiều rộng gần bằng chiều rộng của left, khi đó k biết nó mờ đi có kịp trước khi phần righ lấn sang không

hungaya · January 8, 2018, 3:02pm

Có thể dùng kết hợp duration và delay của transition cả left và text để animate. Thường nhanh hơn 20% đến 30%.
duration cho left: .5s
duration của text: .125s

Vẽ UI là cả 1 nghệ thuật

hell6w9rld · January 8, 2018, 3:07pm

cài này mình xem 1 số trang thấy giao diện cũng như ý mình định thiết kế, nên mình nhái làm theo, nhưng tự code, vì trang họ làm bằng cách sử dụng float, clear với grid system, mình thử với flexbox hoàn toàn, chứ ngồi tự nghĩ từ layout , phối màu, rồi dựng khung , code từng tí chắc chết quá ~~ mắt thẩm mĩ còn thấp mà thấy logic càng code nhiều lên càng đòi quản lý logic các thành phần càng cao

tntxtnt · January 8, 2018, 3:20pm

thì ngay từ đầu bốc đại bootstrap mà fang cho rồi Người ta làm tới vơ sần 3.3.7 4.0 rồi mà mình mới bập bẹ vơ sần 0.1 thì sao lại.

với lại code sao cho hoàn thiện cái đã rồi mới add thêm tính năng mới vào như hiệu ứng di chuyển này nọ, chưa xong gì mà đã thêm hiệu ứng rồi thấy khó quản lý là phải. Tạo được vơ sần 0.1 cùi bắp nhưng hoàn thiện rồi mới thêm tính năng vào thành version 0.2, đâu có ai mới vô nhảy phát làm version 0.9 hay 1.0 đâu.

hungaya · January 8, 2018, 4:11pm

Đồng ý với bạn CSS thuần dành cho tay cứng thích hợp hơn là dân mới vào nghề.
Beginner vẫn nên dùng CSS Framework và JS Framework để xài.

hell6w9rld · January 8, 2018, 4:23pm

mình không theo web, mình chỉ học thêm để lấy kiến thức nền tảng, fw sẽ nâng cấp theo thời gian và lỗi thời, rồi dần ra thêm các fw mới, mình học không phải để làm sản phẩm hay là làm công việc chính, học fw bây giờ không được phù hợp lắm, học xong k dùng vài năm, tự động nó cập nhật, khi đó mớ kiên thức của mình sẽ lỗi thời trong khi chưa khi nào dùng thay vào đó mình sẽ thử xây dựng 1 blog nhỏ nhỏ, đề hiểu cách làm như thế nào, có kiến thức nền tảng, sau học fw (nếu cần cũng chưa muôn)
dùng fw thì mình thấy nhanh, đẹp nhưng theo mình ng mới học xong cơ bản k nên dùng, thay vì học cái người ta xây dựng thì học cách người ta xây dựng thì hay hơn
kiểu như 1 người mới học cấu trúc dữ liệu, học lý thuyết xong mang thư viện ra dùng linked list, hash, tree, graph, stack, queue… các thứ… thì sẽ khó tiến xa hơn là tự dùng ngôn ngữ cài đặt thủ công, rồi khi làm sản phẩm nếu cần thì mới dùng lib