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

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

hungaya · January 8, 2018, 4:45pm

CSS Framework quan trọng và grid system và modal presentation.
JS Framework quan trọng phần binding: data binding từ JS sang DOM, event binding từ DOM sang JS. Thứ hai là animation: gồm view animation và route animation (animation giữa các route khác nhau). Thứ 3 là architecture: MVC, MVVM.

Bạn có thể build tất tần tật mọi component chỉ từ những thành phần cơ bản trên.
Layout hardcode, animation hardcode. Không phải làm thuần cho mọi thứ lẫn nhau như vậy.
Thuần lai tạp chỉ làm site nhỏ.
Site lớn phải chia module rõ ràng, dù viết thuần nhưng vẫn phải scale được.

Không theo web sao không dùng Wordpress cho tiện @@

hell6w9rld · January 8, 2018, 9:45pm

mình đã xử lý được sơ sơ cái toogle, nhưng h vẫn còn 1 lỗi nhỏ, là 2 thành phần văn bản profile và nav nằm trong class="main-left-inner-fixed" (class này là để fixed cái class main-left, vì flexbox không fixed được item) nó không được ẩn đi thật sự, mà nó chỉ mờ đi, nên khi bấm vào button toogle(3 dấu gạch ngang) thì có đôi khi không bấm được vì con chuột năm đúng chỗ 2 dòng chữ đó. mình đã cho width củaclass main-left và main-left-inner = 0 cả mà k được, hepl me

html

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

css

.main-left {
  flex: 0 0 230px; /
  min-height: 100vh;
  transition: 0.4s;
   background-color: transparent;

}

.hidden-main-left {
  flex: 0 0 0px; 
  opacity: 0;
}


.main-left-inner-fixed {
  position: fixed;
  color: #fff;  
}

.hidden-main-left-inner-fixed {
  width: 0;
}

js

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

   var left = document.getElementById('hidden-main-left-inner-fixed');
   if (left.getAttribute('class') == 'main-left-inner-fixed'){
   		left.setAttribute('class', 'main-left-inner-fixed hidden-main-left-inner-fixed');
   }
   else {
   		left.setAttribute('class', 'main-left-inner-fixed');
   }
}

Chien_Dang · January 9, 2018, 2:33am

Cái này đơn giản thôi, bạn cho thêm cái thuộc tính z-index vào, z-index nhỏ hơn sẽ nằm dưới cái z-index lớn hơn.
Ko ngờ có 1 tối ko vào mà topic xôm tụ quá
Anyway, mình vẫn ủng hộ quan điểm là làm cho sản phẩm chạy được đã rồi hãy optimize, nếu ko cứ tập trung vào chỉnh đến lúc ai bảo chỉnh cái này chưa đẹp, lại ngồi chỉnh theo kiểu khác thì thành đẽo cày giữa đường mất.

Quan_Tran · January 9, 2018, 3:57am

Video google dev hướng dẫn từ rất hay : ).

Quan_Tran · January 9, 2018, 3:59am

Bạn để pointer-events: none; khi nó ẩn, hiện thì đê auto

hell6w9rld · January 9, 2018, 12:59pm

cách này giải quyết được, nhưng các thành phần bên cột xám thật sự vẫn còn, chứ chưa được ẩn đi thật sự, thì có sao k nhỉ, z-index chỉ để che mắt

Chien_Dang · January 10, 2018, 2:21am

Thực ra là ko sao cả, vì nhiều cách làm ẩn/hiện của nhiều trang hiện nay còn làm là để left < 0 , tức là nó vẫn còn nhưng lùi vào trong để m.ng ko nhìn thấy. Và quan trọng hơn là nó ở dưới thì các sự kiện của mình đối với div ở trên sẽ ko bị ảnh hưởng, cái mình cần là thế.
Ko có giải pháp hoàn hảo, chỉ có giải pháp dùng được thôi, cứ làm đi