Nếu tôi có thể tránh sử dụng JavaScript cho hoạt ảnh thành phần, thì tôi vô cùng hạnh phúc và có động lực để làm như vậy. Chúng hiệu quả hơn, không yêu cầu khung JavaScript để quản lý các bước và chúng thanh lịch hơn. Một hiệu ứng khó thực hiện với CSS thuần túy là trượt lên và xuống, trong đó nội dung bị ẩn khi "lên" và trượt vào khi "xuống". Lý do khó là vì bạn có thể không biết chiều cao nội dung. Sau khi thử nghiệm với các thuộc tính CSS khác nhau, tôi đã tìm ra cách tạo hiệu ứng trượt CSS thuần túy
Xem bản trình diễn
HTML
Hiệu ứng thực sự chỉ yêu cầu một yếu tố, vì vậy chúng tôi sẽ gắn bó với yếu tố đó
Some content here....
Thêm nhiều nội dung như bạn muốn
CSS
Trước khi đi sâu vào thủ thuật, hãy thiết lập một vài thuộc tính rõ ràng. tràn-y và các thuộc tính hoạt hình CSS
.slider {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier[0, 1, 0.5, 1];
}
Vì vậy, bây giờ niềm vui. mẹo mà chúng ta sẽ sử dụng để làm cho độ cao trở nên đẹp mắt là thuộc tính
.slider {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier[0, 1, 0.5, 1];
}
7. Chúng tôi sẽ đặt giá trị thuộc tính đó thành mặc định hợp lý và sau đó tạo một lớp khác để đặt .slider {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier[0, 1, 0.5, 1];
}
7 đó thành .slider {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier[0, 1, 0.5, 1];
}
9, do đó trượt phần tử vào.slider.closed {
max-height: 0;
}
Sau một hồi mày mò, tôi thực sự thích chức năng định thời gian chuyển đổi
.slider.closed {
max-height: 0;
}
0 ở trên, mặc dù có thể có một phương pháp khoa học hơn cho hoạt ảnh. Tại thời điểm này, điều duy nhất chúng ta cần làm là chuyển lớp đóng sang trượt phần tử ra ngoài.Xem bản trình diễn
Không hoàn hảo
Vì vậy, có trường hợp chiều cao của phần tử có thể là
.slider.closed {
max-height: 0;
}
1 hoặc .slider.closed {
max-height: 0;
}
2. Trong trường hợp đó, chúng tôi gặp một chút mất mát vì phần tử không có chiều cao cố định. Trong trường hợp đó, bạn có hai lựa chọn. Đầu tiên là thừa nhận thất bại và sử dụng khung CSS. Thứ hai là đo chiều cao của DIV bằng JavaScript và đưa quy tắc chiều cao tối đa vào biểu định kiểu để hoạt ảnh được đo hoàn hảo. Ngoài ra, hãy nhớ rằng 100% theo quy tắc chiều cao tối đa sẽ không đáng tin cậy vì 100% liên quan đến chiều rộng, không phải chiều cao Trong một ứng dụng dành cho thiết bị di động mà tôi đang làm việc, có một số hoạt ảnh để thả xuống nội dung bổ sung khi cần khi nhấp vào một mục. Về cơ bản, hiệu quả là tôi chạm hoặc nhấp vào một mục và sau đó một menu thả xuống bên dưới. Một lần nhấp hoặc chạm khác và menu sẽ trượt trở lại
Đây là giao diện của nó [từ geocrumbs. mạng lưới]
Trước đây tôi đã sử dụng jQuery. slideDown[] và. slideUp[] để làm điều này, nhưng nếu bạn thực sự thử chạy nó trên hầu hết các điện thoại ngày nay, bạn sẽ thấy rằng hình ảnh động khá giật vì nó chạy mà không có hỗ trợ kết xuất phần cứng chỉ sử dụng CPU thay vì GPU
Chuyển tiếp CSS 101
Các chuyển đổi CSS thường giúp dễ dàng thay thế các hiệu ứng bằng hoạt ảnh CSS hiển thị mượt mà hơn nhiều trên các thiết bị và máy tính chậm hơn giả sử bạn đang chạy một trình duyệt gần đây. Hầu hết các hiệu ứng chuyển tiếp CSS đều cực kỳ dễ tạo và sử dụng
Ví dụ: ở đây, một hoạt ảnh mờ dần và mờ dần đơn giản được gắn với một vài lớp CSS [ví dụ trên Plunker]
.fadein, .fadeout { opacity: 0; -moz-transition: opacity 0.4s ease-in-out; -o-transition: opacity 0.4s ease-in-out; -webkit-transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out; } .fadein { opacity: 1; }
Chuyển đổi hoạt động bằng cách xử lý thay đổi giá trị của thuộc tính CSS. Bất kỳ thuộc tính nào có giá trị số đều có thể được chuyển đổi theo cách này. Một số ví dụ là độ mờ, chiều cao và chiều rộng, giá trị màu, v.v. Bạn chỉ định thuộc tính CSS một khung thời gian và cơ chế nới lỏng xác định tốc độ chuyển đổi được cân bằng như thế nào. Dễ dàng vào và ra, chẳng hạn như tăng dần lên đến đỉnh, sau đó chậm lại khi quá trình chuyển đổi kết thúc
Trigger FadeIn/FadeOut Hello World Text
Và sau đó, thật dễ dàng để thêm và xóa các kiểu phù hợp bằng cách sử dụng các lớp CSS khác hoặc trình kích hoạt tập lệnh rõ ràng. Đây là một ví dụ sử dụng trình kích hoạt mã bằng jQuery
$["#Trigger2"].click[function [] { if [$["#Fader"].hasClass["fadeout"]] $["#Fader"].removeClass["fadeout"].addClass["fadein"]; else $["#Fader"].removeClass["fadein"].addClass["fadeout"]; }];
Và thì đấy, bạn có một quá trình chuyển đổi mờ dần/mờ dần về cơ bản là mang tính khai báo – chỉ đơn giản bằng cách sử dụng một vài lớp CSS. Nếu bạn đang sử dụng một khung liên kết như AngularJS, Knockout, Ember, v.v. bạn có thể liên kết trực tiếp các lớp này để tác động đến hành vi, nếu không, một vài dòng mã JS sẽ thực hiện thủ thuật
Bạn có thể tạo hoạt ảnh cho rất nhiều thuộc tính CSS theo cách này và việc thực hiện điều này với hầu hết các thuộc tính đó khá dễ dàng
Chiều cao và chiều rộng Ảnh động phức tạp hơn
Bạn cũng có thể tạo hiệu ứng động cho chiều cao và chiều rộng bằng cách sử dụng các hiệu ứng chuyển tiếp CSS và logic để thiết lập tính năng này giống nhau. Nhưng có một số phức tạp được thêm vào khi sử dụng hoạt ảnh chiều cao và chiều rộng vì các phần tử DOM được tạo bằng cách sử dụng mô hình Hộp DOM dự đoán chiều rộng và chiều cao của phần tử, cộng với phần đệm và đường viền, v.v. Mặc dù thật dễ dàng để tạo hiệu ứng chiều cao và chiều rộng, nhưng để tạo hiệu ứng động cho chúng trở nên vô hình và tự thay đổi kích thước thành kích thước phù hợp thực sự không rõ ràng như vẻ ngoài của nó
Tôi sẽ bỏ qua tất cả những khởi đầu sai của mình ở đây - đủ để nói rằng một số đường dẫn hoạt ảnh rõ ràng sử dụng trực tiếp chiều cao và chiều rộng không hoạt động tốt lắm, vì để ẩn phần tử, tôi phải xóa phần đệm. Sau đó, khi làm cho nó hiển thị, phần đệm phải được thêm lại, nhưng khi phần đệm được thêm vào, phần đệm sẽ mở rộng ngay lập tức, bỏ qua quá trình chuyển đổi hoạt ảnh. Nếu chiều cao lớn hơn, bạn sẽ thấy phần tử được đệm ngay sau đó là phần còn lại được hiển thị cùng với quá trình chuyển đổi. Không tốt
Giải pháp tốt hơn là sử dụng thuộc tính chiều cao tối đa cùng với thuộc tính tràn-y [hoặc chiều rộng tối đa và tràn-x] để giới hạn kích thước và loại bỏ bất kỳ phần đệm và lề nào bằng cách bọc phần tử được làm động vào một phần tử khác không
Đây là giao diện của nó trong một ví dụ [và bạn có thể xem ví dụ trên Plunker]
#Slider { } #Actual { background: silver; color: White; padding: 20px; } .slideup, .slidedown { max-height: 0; overflow-y: hidden; -webkit-transition: max-height 0.5s ease-in-out; -moz-transition: max-height 0.5s ease-in-out; -o-transition: max-height 0.5s ease-in-out; transition: max-height 0.5s ease-in-out; } .slidedown { max-height: 60px ; } Trigger Slideup/SlideDown
Hello World Text // slideup/slidedown $["#Trigger"].click[function [] { if [$["#Slider"].hasClass["slideup"]] $["#Slider"].removeClass["slideup"].addClass["slidedown"]; else $["#Slider"].removeClass["slidedown"].addClass["slideup"]; }];
Có một vài điều khó khăn đang diễn ra ở đây để làm cho công việc này
Đầu tiên có những. trượt lên và. các lớp CSS slidedown với slideup là chế độ đóng. Lưu ý về cơ bản, họ đã thiết lập chiều cao tối đa và quá trình chuyển đổi. Ở chế độ đóng, chiều cao tối đa được đặt thành 0 và tràn-y ẩn giúp ẩn tất cả nội dung một cách hiệu quả. Lớp trượt xuống sau đó đặt chiều cao thành một chiều cao cụ thể. Thật không may, bạn phải sử dụng một chiều cao cụ thể ở đây và chiều cao đó phải đủ lớn để chứa nội dung lớn nhất mà bạn muốn hiển thị và kích thước phải gần nhất có thể với kích thước nội dung thực tế của bạn. Hoạt ảnh chạy đến chiều cao tối đa được chỉ định – nếu nội dung của bạn nhỏ hơn chiều cao tối đa, hoạt ảnh sẽ tiếp tục sau khi nội dung của bạn được hiển thị. Nếu nó quá lớn thì nội dung sẽ bị cắt. Chọn kích thước phù hợp ở đây là chìa khóa
Bạn cũng có thể kích hoạt chiều cao tối đa thông qua mã nếu cần tính toán, nhưng điều đó không dễ dàng nếu nội dung bị ẩn hoặc thu gọn [$. outsideHeight[] trả về 0 cho đến khi nội dung thực sự thay đổi kích thước. Thêm về điều này trong phần tiếp theo]
Điều khó khăn tiếp theo là bạn cần bọc nội dung của mình – nếu bạn có bất kỳ phần đệm hoặc lề nào. Trình bao bọc loại bỏ phần đệm khỏi vùng chứa gói một cách hiệu quả để chiều cao tối đa chỉ áp dụng cho chiều cao được tính toán của phần tử. Nếu bạn không có phần đệm hoặc lề thì nội dung của bạn có thể chuyển trực tiếp vào bên trong vùng chứa hoạt hình. Mặt khác, vùng chứa đảm bảo phần tử được bọc hoàn toàn bị ẩn
Cuối cùng, mã để thực sự kích hoạt hoạt ảnh chỉ cần loại bỏ một lớp và thay thế nó bằng lớp khác để gọi hiệu ứng
Điều này hoạt động tốt và dễ hiểu. Nhược điểm duy nhất là cài đặt chiều cao tối đa phải được đặt thành giá trị pixel rõ ràng. Chúng tôi sẽ giải quyết vấn đề đó trong lần lặp lại tiếp theo
Một jQuery Plug-in để làm cho nó có thể tái sử dụng nhiều hơn
Hãy xem xét một lần nữa và xem cách làm cho điều này dễ dàng hơn một chút bằng cách xây dựng một plug-in jQuery nhỏ – jquery. chuyển đổi slide. js. Trình cắm này về cơ bản gói gọn các khái niệm được mô tả trong phần trước và ngoài ra còn cung cấp giải pháp thay thế cho vấn đề chiều cao tối đa, bằng cách tính toán chiều cao của trình bao bọc để chúng tôi không phải đoán kích thước
Đây là cách plug-in hoạt động. Có một vài điều cần phải được thực hiện để sử dụng nó
- Thêm và định cấu hình một vài lớp CSS
- Gói nội dung của bạn vào một thùng chứa gói
- Sử dụng plug-in jQuery để kích hoạt thao tác trượt
Trước tiên, bạn cần xác định hai phong cách
.height-transition { -webkit-transition: max-height 0.5s ease-in-out; -moz-transition: max-height 0.5s ease-in-out; -o-transition: max-height 0.5s ease-in-out; transition: max-height 0.5s ease-in-out; overflow-y: hidden; } .height-transition-hidden { max-height: 0; }
Bạn có thể tùy chỉnh quá trình chuyển đổi để phù hợp với nhu cầu của mình với thời gian dài hơn/ngắn hơn và cơ chế nới lỏng do bạn chọn
Bạn cũng cần bọc nội dung thực tế mà bạn muốn trượt lên và xuống vào một vùng chứa rồi áp dụng một hoặc cả hai kiểu này. Cái sau có thể được sử dụng để ẩn nội dung của bạn ban đầu
________số 8Ở đây, phần tử #Actual là nội dung của bạn mà bạn có thể định dạng khi cần. #SlideWrapper là vùng chứa được bổ sung mà các hiệu ứng chuyển tiếp được kết nối với. Như đã thảo luận trước đây, trình bao bọc này là cần thiết để tránh các vấn đề về kích thước phần đệm/lề/đường viền. Tôi quyết định để bạn tự tạo phần tử này, thay vì nhờ trình cắm tạo phần tử đó vì bạn có thể ẩn phần tử một cách khai báo mà không cần bất kỳ logic phức tạp nào để suy luận khi nào nên hiển thị hoặc ẩn nội dung bên trong. Nội dung bên trong không bao giờ được chạm vào bởi trình cắm và trình bao bọc bên ngoài là thứ liên quan đến quá trình chuyển đổi
Ngoài ra, trình cắm cũng giải quyết vấn đề về kích thước chiều cao tối đa. Bên trong, plug-in nhanh chóng cho phép vùng chứa mở rộng để có được kích thước thực của phần tử và sau đó đặt chiều cao tối đa cho phù hợp. Điều này có nghĩa là bạn không phải chỉ định chiều cao tối đa 'cố định' như trước đây - trình cắm sẽ tự động tìm ra chiều cao phù hợp để khắc phục vấn đề chính mà tôi gặp phải với phương pháp ban đầu
Sau đó, bạn có thể kích hoạt trình cắm bằng mã như sau [ví dụ trên Plunker]
$["#Trigger"].click[function [] { if [$["#SlideWrapper"].hasClass["height-transition-hidden"]] $["#SlideWrapper"].slideDownTransition[]; else $["#SlideWrapper"].slideUpTransition[]; }];
Đây là mã plug-in hoàn chỉnh
.slider {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier[0, 1, 0.5, 1];
}
0Không có gì nhiều đối với mã trình cắm này. . slideUpTransition[] chỉ cần áp dụng một kiểu và đặt chiều cao tối đa. . slideDown Transition[] loại bỏ kiểu ẩn và sau đó ghi lại chiều cao thực tế của phần tử và sử dụng rõ ràng chiều cao tối đa cho giá trị đó. Điều này đảm bảo rằng các phần tử có kích thước chính xác mà không cần sử dụng các giá trị chiều cao cố định
Coi chừng các yếu tố năng động
Ví dụ trên hoạt động rất tốt, nhưng khi tôi thực sự chuyển mã như thế này vào ứng dụng của mình, hiển thị trong GIF động ở đầu bài viết, tôi lại gặp phải một trở ngại nhỏ khác. Cụ thể là hoạt ảnh trượt xuống không hoạt động, trong khi hoạt ảnh trượt lên - kỳ lạ, phải không?
Hóa ra là do phần tử được gắn động hiển thị thanh công cụ thả xuống mục. Trong danh sách mục lịch sử, tôi có một 'thanh công cụ thả xuống' tĩnh được di chuyển và gắn vào mục đang hoạt động mỗi khi người dùng nhấp hoặc chạm vào một trong các mục. IOW, mục này đang được di chuyển linh hoạt xung quanh và được gắn vào mục đang hoạt động trong cây DOM
Vấn đề là phần tử không được đặt đúng chỗ khi tôi gọi. slideDownTransition[] hiệu quả đến mức các mục chưa hiển thị. Khi lớp cố gắng thay đổi kích thước, nó vẫn bị ẩn một cách hiệu quả và do đó, các chuyển đổi CSS không có tác dụng. Khi phần tử cuối cùng hiển thị, nó chỉ hiển thị dưới dạng một đối tượng được hiển thị đơn giản
Giải pháp thay thế là trì hoãn một chút việc áp dụng các lớp CSS với setTimeout[] cho phép phần tử được đặt vào vị trí trước, trước khi hoạt ảnh được kích hoạt
.slider {
overflow-y: hidden;
max-height: 500px; /* approximate max height */
transition-property: all;
transition-duration: .5s;
transition-timing-function: cubic-bezier[0, 1, 0.5, 1];
}
1À vâng, setTimeout[] – giải pháp khắc phục tất cả các vấn đề về thời gian của DOM. -]
Tôi nghi ngờ đây là trường hợp sử dụng phổ biến cho các thao tác trượt xuống, vì vậy đây là điều cần lưu ý. Các phần tử có chứa hiệu ứng chuyển tiếp phải hiển thị nếu không hiệu ứng chuyển tiếp không được áp dụng
Nó có đáng không?
Tất cả những điều này có vẻ hơi mất công, nhưng kết quả cuối cùng khá dễ dàng. Nếu bạn đang xử lý các chuyển đổi CSS đơn giản như Fading, thì việc sử dụng chúng là điều không cần bàn cãi và bạn nên coi chúng như một sự thay thế cho fadeIn[] và fadeOut[] của jQuery. Đối với các chuyển đổi chiều cao và chiều rộng, bạn cần nỗ lực hơn một chút để xử lý kích thước vùng chứa, nhưng với sự trợ giúp của phần bổ trợ mà tôi đã mô tả, thật dễ dàng để đẩy phần này vào một ứng dụng và sử dụng nó gần như dễ dàng như jQuery. slideUp[] và. slideDown[] với kết quả mượt mà hơn nhiều
Tài nguyên
- Bài viết chuyển tiếp CSS
- Chuyển tiếp CSS trên MDN
- vụn đất. net [ứng dụng mẫu đã truyền cảm hứng cho bài đăng này]
- ww. jquery. js – thư viện chứa hai plug-in jquery này được mô tả [GitHub]
- $. fn. slideDownTransition tài liệu
- $. fn. slideUpTransition tài liệu?
- CSS Easing Animation Tool – công cụ thú vị để thử nghiệm nới lỏng trong Chuyển tiếp
Các bài viết khác có thể bạn thích
- JavaScript JSON Phân tích cú pháp ngày và ngày thực
- Hộp thoại Phương thức Bootstrap hiển thị dưới Nền Phương thức
- Tạo khuôn mẫu cho khách hàng với jQuery
- Trở lại vấn đề cơ bản. Liên kết không điều hướng để xử lý JavaScript
Chia sẻ
Nội dung này có hữu ích với bạn không?
Được đăng bằng CSS JavaScript HTML5
Tiếng nói của lý trí
lespauled
24 tháng 2 năm 2014
# lại. Sử dụng Chuyển tiếp CSS sang SlideUp và SlideDown
Tôi có thể không chính xác, nhưng bạn không thể sử dụng toggleClass cho fadeIn?
Rick Strahl
24 tháng 2 năm 2014
# lại. Sử dụng Chuyển tiếp CSS sang SlideUp và SlideDown
@lespauled - Tôi đã xem nhanh Plunker thứ hai [mẫu trượt xuống thủ công] và thay thế trình xử lý nhấp chuột bằng.
______12
and that does work. I had to refresh my memory on .toggleClass[] - I had forgotten that it can work with multiple classes and that does indeed work.
Cayce k
12 tháng 6 năm 2014
# lại. Sử dụng Chuyển tiếp CSS sang SlideUp và SlideDown
Xin chào.
Cảm ơn vì điều này. Tôi đã tìm thấy một cách CSS thuần túy dễ dàng hơn để thực hiện slide mà hiện tại tôi không có thời gian đăng lên bất kỳ trang web nào khác, nhưng có thể tốt cho bạn sử dụng.
______40
I'm using it for menus right now. But the content inside has all the styling for the menus and this div just holds that content. By setting max-height to 0 like you had obviously forces it to 0 on off and then I use toggle jQuery to add the class for clicking reasons. [That one is obvious that you can't change..]
By setting the max-height in active to a value just a bit higher than my predicted max-height any way it will force the content to slide up at a pace equivalent to fill the max-height. This means don't put a super large number or this won't work unless there is a ton of content. Hopefully this helps someone.
Peter Hobbs
26 tháng 10 năm 2014
# lại. Sử dụng Chuyển tiếp CSS sang SlideUp và SlideDown
Làm tốt lắm đây Rick. Bài viết xuất sắc của bạn đã làm cho ngày cuối tuần của tôi. Thực sự đánh giá cao lời giải thích chi tiết của bạn
không phanh
23 tháng 11 năm 2014
# lại. Sử dụng Chuyển tiếp CSS sang SlideUp và SlideDown
Xin chào, bạn phải thêm chức năng thay đổi kích thước để thay đổi kích thước cửa sổ sau đó tính chiều cao bên ngoài không chính xác sau khi thay đổi kích thước cửa sổ
Saurabh Udaniya
05 tháng 4 năm 2015
# lại. Sử dụng Chuyển tiếp CSS sang SlideUp và SlideDown
bạn đang đặt chiều cao là
Trigger FadeIn/FadeOut Hello World Text1Tôi đã thử giải pháp của bạn với lệnh góc và nó không hoạt động, tuy nhiên, việc thêm "px" vào đó
Trigger FadeIn/FadeOut Hello World Text2
saved my time so thanks for this article.
Madhu
03 tháng 11 năm 2015
# lại. Sử dụng Chuyển tiếp CSS sang SlideUp và SlideDown
khi tôi nhấp vào nút mở, hãy mở một div từ lượt thích ở giữa [clip], phía trên div hiển thị nút đóng để đóng div like clip, mở và đóng các hiệu ứng lặn như clip chứ không phải trượt lên và trượt xuống
Tim
25 tháng 7 năm 2016
# lại. Sử dụng Chuyển tiếp CSS sang SlideUp và SlideDown
Trong ví dụ thứ hai khi chiều cao tối đa được đặt qua jquery, bất kỳ ý tưởng nào tại sao tạm thời đặt chiều cao thành không hiển thị trong giây lát trên phần tử trước khi được đặt về 0?
Rick Strahl
25 tháng 7 năm 2016
# lại. Sử dụng Chuyển tiếp CSS sang SlideUp và SlideDown
@Tim - Các thay đổi DOM bên trong hàm không được áp dụng trực quan cho đến khi hàm kết thúc thực thi. Trong trường hợp này, việc thay đổi giá trị được thực hiện để phần tử ở trạng thái phù hợp, nhưng thay đổi không bao giờ được áp dụng cho cây hình ảnh thực sự hiển thị trong trình duyệt. Kết quả cuối cùng là hiệu ứng không bao giờ được hiển thị.
Đây là hành vi kỳ quặc và là một trong những lý do tại sao setTimeout[] cần thiết trong nhiều trường hợp trong JavaScript - độ trễ setTimeout[] đảm bảo rằng các thay đổi trước đó đã được áp dụng cho cây trực quan trước khi thực hiện lệnh subssent .
Roy
09 tháng 3 năm 2017
# lại. Sử dụng Chuyển tiếp CSS sang SlideUp và SlideDown
Xin chào,
hướng dẫn tuyệt vời. Đó là công việc tốt cho tôi. Nhưng nó dường như không hoạt động trong Safari [iphone và macbook]. Tôi đã thử nghiệm với cảnh báo và có vẻ như Safari không tính được chiều cao bên ngoài. Có ai biết một giải pháp?
Rick Strahl
09 tháng 3 năm 2017
# lại. Sử dụng Chuyển tiếp CSS sang SlideUp và SlideDown
Vâng, có vẻ như trong iOS 10 bằng cách nào đó đã bị hỏng. có thể sử dụng innerHeight và vùng chứa gói không có phần đệm hoặc lề?
Roy
10 tháng 3 năm 2017
# lại. Sử dụng Chuyển tiếp CSS sang SlideUp và SlideDown
Tnx vì đã trả lời nhanh. Tôi đã thử một số cách, nhưng trong trường hợp của tôi không có gì thực sự hiệu quả. Vì vậy, tôi tìm thấy một giải pháp khác. Tôi không tính chiều cao tối đa bằng Javascript, nhưng tôi sử dụng chiều cao tối đa cố định. Ví dụ
Trigger FadeIn/FadeOut Hello World Text3
Đối với tôi thế là đủ. Vùng chứa sẽ không lớn hơn nội dung mà nó chứa. Tôi vẫn sử dụng độ trễ, vì nó kết hợp tốt với hoạt ảnh cuộn mà tôi cũng sử dụng
Rick Strahl
Ngày 10 tháng 3 năm 2017
# lại. Sử dụng Chuyển tiếp CSS sang SlideUp và SlideDown
Cảm ơn Roy, vì đã xem xét điều đó. Sẽ dùng thử và nếu nó hoạt động, hãy thêm nó vào bài viết
Saikat Das
Ngày 06 tháng 4 năm 2017
# lại. Sử dụng Chuyển tiếp CSS sang SlideUp và SlideDown
Tôi đã sử dụng cái này và hoàn toàn hoạt động tốt trên trang web của chúng tôi. Tuy nhiên, thứ này không hoạt động trên thiết bị di động và trên máy tính bảng. làm thế nào để tôi sửa lỗi này. ??