Bạn có thể làm động css thuộc tính hiển thị không?

Với màn hình thuộc tính CSS. không có phần tử nào có thể bị xóa khỏi trang được hiển thị. Thật không may, các chuyển đổi CSS trên thuộc tính hiển thị, có thể được sử dụng để loại bỏ dần một phần tử, không được CSS1 hỗ trợ và hơn nữa, việc đặt thuộc tính hiển thị cũng hủy chuyển đổi trên tất cả các thuộc tính khác

Bài viết này đưa ra nhiều cách giải quyết khác nhau cho những hạn chế này mà tôi. e. quá trình chuyển đổi dần dần làm cho một yếu tố biến mất với các hiệu ứng hình ảnh khác nhau

Cách giải quyết độ mờ đơn giản (nhưng không đầy đủ)

Trong các trường hợp đơn giản, có thể sử dụng thuộc tính độ mờ thay vì thuộc tính hiển thị, dẫn đến hiệu ứng mờ dần. Đặt độ mờ thành 0 làm cho một phần tử hoàn toàn trong suốt và do đó làm cho nó biến mất

   . cl0  { độ mờ. 0; . độ mờ 1 giây;

Di chuột lên trên dòng này

để lại không gian trống, lỗi trên IE8 và bắt các sự kiện trong suốt

Phương pháp này có 3 hạn chế quan trọng

• Phần tử trở nên trong suốt và không gian trống vẫn còn. Màn hình tương phản. không có gì lấp đầy khoảng trống đó bằng cách di chuyển các phần tử sau lên trên
• Phần tử trong suốt không biến mất hoàn toàn nhưng vẫn bắt được các sự kiện của chuột, trong khi phần tử có hiển thị. không ai không. Điều này có thể gây ra những tác dụng không mong muốn, đ. g. các liên kết được bảo hiểm không hoạt động, hãy xem bài viết trên blog của chúng tôi "Sự cố về độ mờ chuyển tiếp CSS đối với hiệu ứng mờ dần"
• Nó bị lỗi trên các trình duyệt cũ hơn, e. g. IE 8, vì độ mờ không được hỗ trợ bởi các trình duyệt cũ hơn

Giải pháp tốt hơn và các hiệu ứng hình ảnh khác

Nếu bạn đang tìm giải pháp loại bỏ khoảng trống bằng cách di chuyển lên trên nội dung sau, hãy tiếp tục đọc bài viết này. Nếu không, vui lòng tham khảo bài viết Khả năng hiển thị chuyển tiếp CSS, giải thích cách thực hiện các hiệu ứng hình ảnh khác nhau làm cho một phần tử dần dần xuất hiện hoặc biến mất

Chuyển tiếp CSS trên thuộc tính Chiều cao

Ý tưởng là để mô phỏng một màn hình. none bằng cách đặt chiều cao của phần tử nội dung thành 0 và sau đó trượt vào phần tử bằng cách đặt chiều cao thành bình thường

Điều này hoạt động tốt, miễn là chiều cao của phần tử được cố định và đã biết. Cần chỉ định chiều cao dưới dạng số trong biểu định kiểu. Thật không may, quá trình chuyển đổi không còn hoạt động nếu chiều cao. tự động hoặc chiều cao. 100% được chỉ định (trừ khi phần tử gốc có chiều cao cố định). Trong ví dụ bên dưới, chúng tôi đã sử dụng chiều cao là 100px, để lại một khoảng trống thừa sau Dòng 2

   . chiều cao cl1            {. 0px; . chiều cao;

thời lượng chuyển tiếp. 1s; . ẩn giấu}

   . bên ngoài1. bay lượn. cl1 { chiều cao. 100px}

Đây là đoạn đầu tiên trước văn bản mẫu.  

Di chuột vào đây

Đây là đoạn thứ hai sau mẫu mẫu.  

Đây là một đoạn đầu tiên trước văn bản mẫu

Đây là một đoạn thứ hai sau mẫu

CSS Transitions sử dụng thuộc tính Max-Height

Đối với chiều cao, ý tưởng là mô phỏng màn hình. none bằng cách đặt chiều cao tối đa của phần tử thành 0 và sau đó trượt vào phần tử bằng cách đặt chiều cao tối đa thành bình thường

Ưu điểm của chiều cao tối đa so với chiều cao là trong trường hợp chiều cao tối đa quá lớn, không có khoảng trống thừa nào xuất hiện, vì chiều cao tối đa chỉ giới hạn chiều cao của hộp nội dung chứ không làm cho nó lớn hơn yêu cầu. Vì vậy, có thể đặt chiều cao tối đa thành giá trị cao lớn hơn phần tử nội dung lớn nhất có thể

   . cl4            { chiều cao tối đa. 0px; . chiều cao tối đa 1 giây;

   . bên ngoài4. bay lượn. cl4 { chiều cao tối đa. 100px}

Đây là đoạn đầu tiên trước văn bản mẫu.  

Di chuột vào đây

Đây là đoạn thứ hai sau mẫu mẫu.  

Đây là một đoạn đầu tiên trước văn bản mẫu

Đây là một đoạn thứ hai sau mẫu

Vì vậy, lợi thế của việc sử dụng chiều cao tối đa là chiều cao của phần tử nội dung không cần phải biết và cố định. Nó là đủ để sử dụng một giới hạn trên, tôi. e. một giá trị chiều cao cao hơn phần tử nội dung có thể nhận được

Tuy nhiên, vấn đề là nếu giới hạn trên được sử dụng cho chiều cao tối đa lớn hơn đáng kể so với chiều cao thực, thì phải mất thời gian chạy chuyển tiếp đáng kể để tạo hiệu ứng cho chiều cao tối đa từ giới hạn trên xuống chiều cao thực. Điều này xuất hiện dưới dạng độ trễ không mong muốn trước khi quá trình chuyển đổi kết thúc (mặc dù quá trình chuyển đổi đang chạy và tạo hoạt ảnh cho chiều cao tối đa không có hiệu ứng hình ảnh cho đến khi chiều cao tối đa giới hạn chiều cao thực tế. ) Ngoài ra, do chức năng thời gian chuyển đổi áp dụng cho quá trình chuyển đổi hoàn toàn của chiều cao tối đa và không chỉ phần hiển thị nên nó không xuất hiện đúng, nếu giới hạn trên và chiều cao thực hoàn toàn khác nhau

Tóm lại, quá trình chuyển đổi chiều cao tối đa hoạt động tốt, nếu một người biết giới hạn trên gần nhất của chiều cao của phần tử nội dung, nhưng điều đó trở nên khó khăn, nếu bạn không biết gì về nội dung, e. g. bởi vì nó chứa dữ liệu không xác định

Chuyển đổi CSS trên thuộc tính Margin-Top/Margin-Dottom

Bằng cách đặt trực tiếp phần tử nội dung vào một phần tử khác có tràn. ẩn và sử dụng giá trị âm cho lề-Trên hoặc lề-Dưới, có thể cắt bỏ phần trên hoặc dưới của thành phần nội dung. Bằng cách sử dụng giá trị âm của lề-Trên hoặc lề-Dưới (giá trị tuyệt đối của) lớn hơn chiều cao của phần tử nội dung, phần tử nội dung biến mất hoàn toàn

   . cl2            { chuyển tiếp. 1 lề-đầu; . ‑200px;}

   . bên ngoài2. bay lượn. giữa2. cl2 { lề-đầu. 0px}

   . giữa2          { tràn. ẩn giấu }

Đây là một đoạn trước ví dụ thứ hai

Di chuột vào đây

Đây là một đoạn sau mẫu thứ hai.  

Đây là một đoạn trước văn bản ví dụ thứ hai

Văn bản mẫu Văn bản mẫu Văn bản mẫu Văn bản mẫu

Đây là một đoạn sau mẫu thứ hai

Giải pháp này thoạt nhìn có một nhược điểm tương tự như giải pháp chiều cao tối đa, tôi. e. người ta phải tìm một giới hạn trên tốt cho chiều cao tối đa của hộp nội dung và nếu giới hạn trên quá lớn, thì sẽ có một số vấn đề về thời gian. Với Margin-Top/Margin-Bottom, có độ trễ trước hoạt ảnh mở, trong khi với chiều cao tối đa, có độ trễ trước hoạt ảnh đóng

Tuy nhiên, có thể mở rộng giải pháp này theo cách sau

Chuyển đổi lề trên/lề-dưới kết hợp với chuyển đổi chiều cao

Như đã giải thích ở trên, để sử dụng quá trình chuyển đổi trên chiều cao tối đa hoặc trên lề trên/lề dưới như được mô tả trong đoạn trước, người ta cần cung cấp một giới hạn trên cho chiều cao tối đa của thành phần nội dung

Nếu dự đoán sai và phần tử nội dung trở nên lớn hơn giá trị được sử dụng, thì phần tử nội dung sẽ không mở hoàn toàn trong trường hợp chiều cao tối đa và nó sẽ không biến mất hoàn toàn trong trường hợp lề trên/lề dưới

Bây giờ, ý tưởng là kết hợp các giải pháp này và sử dụng chuyển đổi trên chiều cao tối đa để làm cho phần tử biến mất sau khi chuyển đổi. Sau đó, ngay cả khi lề trên/lề dưới không loại bỏ hoàn toàn chiều cao tối đa của phần tử sẽ

Trong ví dụ sau, quá trình chuyển đổi lề-trên/lề-dưới được mô tả trong đoạn trước được kết hợp với một "sự chuyển đổi" trên thuộc tính chiều cao tối đa từ 0px thành 100%. Như đã giải thích ở trên, quá trình chuyển đổi trên chiều cao tối đa từ 0px sang 100% không hoạt động trơn tru, tuy nhiên, ít nhất nó sẽ mở và đóng phần tử ngay lập tức

   . cl7            { chuyển tiếp. lề‑đáy 1s dễ dàng vào;

   . bên ngoài7. bay lượn. giữa7. cl7 {

chuyển tiếp. lề‑đáy 1s dễ dàng ra ngoài;

   . giữa7          { tràn. ẩn giấu;

chuyển tiếp. chiều cao tối đa. 1 giây dễ dàng 1 giây; . 0px}

chuyển tiếp. chiều cao tối đa. 1 giây dễ dàng 0 giây;

Đây là một đoạn đoạn trước văn bản ví dụ thứ hai.  

Di chuột vào đây

Đây là một đoạn sau mẫu thứ hai.  

Đây là một đoạn trước văn bản ví dụ thứ hai

Văn bản mẫu Văn bản mẫu Văn bản mẫu

Đây là một đoạn sau mẫu thứ hai

Để sử dụng phương pháp này, bạn vẫn cần đoán thứ gì đó như giới hạn trên, đối với chiều cao của thành phần nội dung, trong ví dụ là 150px. Tuy nhiên, nó không phải là điều đáng tiếc nếu giá trị được đoán quá nhỏ trong một số trường hợp, sau đó quá trình chuyển đổi mở đầu nhảy ở đầu và quá trình chuyển đổi kết thúc nhảy ở cuối, điều này có vẻ không tệ lắm (vui lòng thử ví dụ)

Thêm hoạt ảnh

Giờ đây, có thể thêm hoạt ảnh phát trong khi chiều cao của phần tử thay đổi dần. Ví dụ sau hiển thị một số hoạt ảnh WebGL™ và taccgl™ (yêu cầu bao gồm Thư viện taccGL) và các ví dụ bên dưới hiển thị một số chuyển đổi CSS trên thuộc tính biến đổi

#el10       { đường viền. 1px màu đen liền khối; . màu vàng;

#middle10   { tràn. ẩn giấu; . chiều cao 2s tuyến tính 0. 1s;

Đây là một đoạn văn trước văn bản ví dụ.  

Văn bản Mẫu Văn bản Mẫu Văn bản mẫu Văn bản mẫu

Đây là một đoạn văn sau ví dụ.  

Đây là một đoạn trước văn bản ví dụ

Văn bản mẫu Văn bản mẫu Văn bản mẫu Văn bản mẫu

Đây là một đoạn sau ví dụ

var t = taccgl. diễn viên("el10",taccgl. flexiBorder,"hiển thị");

t. từ (t. x+(t. w/2), t. y,0). đến (t. x+(t. w-t. h)/2,t. y,0)

thay đổi kích thước(1,1,t. h, t. h/2). Vòng tròn(). bắt đầu()

tiếp(). Rect1(). bayHome(). thay đổi kích thước (t. h,t. h/2,t. w, t. h). bắt đầu();

t. el. phần tử cha mẹ. Phong cách. chiều cao = t. h+"px";

var t = taccgl. diễn viên("el10",taccgl. flexiBorder,"hidden");

t. thay đổi kích thước (t. w, t. h, t. w*2,t. h/2)

đến (t. x-t. w/2, t. y,0). Vòng tròn1(). trong (1). bắt đầu();

t. tiếp(). thay đổi kích thước (t. w*2,t. h/2,t. w*4,1)

đến (t. x-t. w*3/2,t. y,0). trong (1). bắt đầu();

t. el. phần tử cha mẹ. Phong cách. chiều cao="0px";

t=taccgl. diễn viên("el10",null,"hiển thị");

t. thay đổi kích thước (t. w,1,t. w, t. h). trong (2). bắt đầu();

t. el. phần tử cha mẹ. Phong cách. chiều cao = t. h+"px";

t=taccgl. diễn viên("el10",null,"hidden");

t. thay đổi kích thước (t. w, t. h,1,1). trong (2). bắt đầu();

t. el. phần tử cha mẹ. Phong cách. chiều cao="0px";

taccgl. một (tài liệu. cơ thể người). màu trắng"). ShadowOnly(). trong (2). bắt đầu();

var t=taccgl. diễn viên("el10",null,"hiển thị"). từ(-300,1000,4000)

vEnd(0,0,0). thời lượng(2). bắt đầu()

t. el. phần tử cha mẹ. Phong cách. chiều cao = t. h+"px";

taccgl. một (tài liệu. cơ thể người). màu trắng"). ShadowOnly(). trong (2). bắt đầu();

var t=taccgl. diễn viên("el10",null,"hidden"). đến(-400,1000,4000)

vBegin(0,0,0). rotateMiddle(0,1,0). thời lượng(2). bắt đầu();

t. el. phần tử cha mẹ. Phong cách. chiều cao="0px";

Đối với hoạt hình WebGL™, chúng tôi chỉ sử dụng giải pháp thay thế trên thuộc tính chiều cao như đã thảo luận đầu tiên trong bài viết này, vì với javaScript và taccgl™, giá trị giá trị chiều cao thực tế có sẵn là t. h. t. el. phần tử cha mẹ. Phong cách. chiều cao = t. h+"px";. Điều này hoạt động tốt, miễn là phần tử nội dung không tự động thay đổi chiều cao của nó. Nếu có, hãy sử dụng onEnd để đặt lại chiều cao thành tự động sau hoạt ảnh

Đối với (các) hoạt ảnh CSS sau đây, chúng tôi đã sử dụng Chuyển đổi lề-trên/lề-dưới kết hợp với Giải pháp chuyển đổi chiều cao và thêm một chuyển đổi trên thuộc tính biến đổi

   . cl11            { chuyển tiếp. các 1s lề-dưới dẫn-vào, biến đổi 1s;

biến đổi. xoay (150 độ);

   . bên ngoài11. bay lượn. trung11. cl11 {

chuyển tiếp. các 1s lề-dưới dời, biến đổi 1s;

   . giữa11          { tràn. ẩn giấu;

chuyển tiếp. chiều cao tối đa. 1 giây dễ dàng 1 giây; . 0px}

   . bên ngoài11. bay lượn. giữa11 {

chuyển tiếp. chiều cao tối đa. 1 giây dễ dàng 0 giây;

Đây là một đoạn đoạn trước văn bản ví dụ thứ hai.  

Di chuột vào đây

Đây là một đoạn sau mẫu thứ hai.  

Đây là một đoạn trước văn bản ví dụ thứ hai

Văn bản mẫu Văn bản mẫu Văn bản mẫu

Đây là một đoạn sau mẫu thứ hai

Phần kết luận

Chúng tôi đã chỉ ra nhiều cách giải quyết khác nhau cho các hiệu ứng chuyển tiếp trên màn hình CSS. không có tài sản, tôi. e. chuyển tiếp làm cho một phần tử xuất hiện hoặc biến mất theo cách mà các phần tử khác chiếm không gian của phần tử biến mất, e. g. bằng cách cuộn lên và xuống các yếu tố bên dưới

Những thứ này kết hợp tốt với hoạt ảnh WebGL™ được tạo bằng taccgl™ nhờ đó quá trình chuyển đổi taccGL phát trên chính phần tử đó và quá trình chuyển đổi CSS di chuyển các phần tử HTML còn lại vào và ra khỏi không gian của phần tử biến mất hoặc xuất hiện

WebGL™ là thương hiệu của Khronos Group Inc

[1] Bản thảo làm việc chuyển đổi CSS không liệt kê thuộc tính hiển thị là một trong những thuộc tính có thể hoạt ảnh và do đó không thể chuyển đổi CSS trên thuộc tính đó

Thuộc tính hiển thị có thể hoạt ảnh được không?

Thuộc tính CSS nào có thể được làm động?

Chúng tôi có thể áp dụng chuyển tiếp trên màn hình trong CSS không?

Có thể tạo hoạt ảnh cho một phần tử bằng CSS không?