Làm cách nào để đảo ngược hoạt ảnh trong css?

Tôi đã cung cấp cho bạn các ví dụ về nơi sử dụng quá trình chuyển đổi và giải thích cách sử dụng nó. Bạn áp dụng quá trình chuyển đổi sang trạng thái bình thường và sau đó khi bạn thay đổi điều gì đó, hãy nói khi di chuột (hoặc thêm một lớp), phần tử sẽ chuyển sang giá trị mới. Khi di chuột bị xóa, nó sẽ chuyển trở lại giá trị ban đầu. Tôi nhớ đã gõ chính xác những câu đó một vài bài viết trước

Chuyển tiếp và hoạt ảnh có thể thực hiện những điều tương tự trong một số trường hợp đơn giản nhưng khung hình chính mạnh hơn khi cần hoạt ảnh và thời gian phức tạp

Và tôi tin rằng di chuột có thể được thay đổi thành phương thức đánh dấu, điều đó có nghĩa là, di chuột cũng có thể hoạt động với phương thức nút bấm mà mã của tôi sử dụng

Việc hack hộp kiểm thực sự không liên quan gì đến câu hỏi. Nó chỉ là một phương tiện đăng ký một cú nhấp chuột để bạn có thể bắt đầu một cái gì đó chỉ bằng css. Bạn có thể có thể thay thế 90% hành động nhấp chuột của mình bằng cách sử dụng hack hộp kiểm nhưng sẽ làm phức tạp rất nhiều html và css

Tôi cũng có thể sai về điều này và mã động khi di chuột sẽ không thể hoạt động trong mã của tôi bằng cách sử dụng phương thức nhấp chuột thay vì di chuột

Bản demo di chuột có thể được chuyển đổi thành nhấp chuột khá dễ dàng

Sẽ khá phức tạp đối với rèm cửa của bạn vì kỹ thuật này yêu cầu kéo các hoạt ảnh lồng vào nhau để hoạt động, vì vậy đối với rèm cửa của bạn, bạn sẽ cần 4 hoạt ảnh (2 cho mỗi bên)/

https này. //jsfiddle. mạng/gLqwtr0z/

.reverse .panel-left {
  transform: translateX(-100%);
}

Thay thế tất cả những thứ này?

.container.active .curtain .panel-left {
  animation: curtain1-open 8s forwards 520ms;
}

@keyframes curtain1-open {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}

Có phải

.container.active .curtain .panel-left {
  animation: curtain1-open 8s forwards 520ms;
}

@keyframes curtain1-open {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}

Tất cả các lớp này sẽ đi đâu?

.container.active .curtain .panel-left {
  animation: curtain1-open 8s forwards 520ms;
}

@keyframes curtain1-open {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}

Tôi bối rối

Khi tôi cố gắng thêm mã chuyển đổi, không có màn che nào hiển thị, nó chỉ trống

Trước tiên, tôi sẽ bắt đầu với việc chuyển đổi mã hoạt hình này để sử dụng quá trình chuyển đổi

.container.active .curtain .panel-left {
  animation: curtain1-open 8s forwards 520ms;
}

@keyframes curtain1-open {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}

.container.active .curtain .panel-right {
  animation: curtain2-open 8s forwards 520ms;
}

@keyframes curtain2-open {
  to {
    transform: translateX(calc(100% + 1px));
  }
}

.fadingOut .container.active .curtain .panel-left {
  animation: curtain1-close 8s forwards;
}

@keyframes curtain1-close {
  from {
    transform: translateX(calc(-100% - 1px));
  }

  to {
    transform: translateX(0);
  }
}

.fadingOut .container.active .curtain .panel-right {
  animation: curtain2-close 8s forwards;
}

@keyframes curtain2-close {
  from {
    transform: translateX(calc(100% - 1px));
  }

  to {
    transform: translateX(0);
  }
}

dự đoán của tôi sẽ là thế này. https. //jsfiddle. net/ymz2ao6w/

Màn cửa có thể nhìn thấy, nhưng chúng không di chuyển

.container.active .curtain .panel-left {
  transform: curtain1-open translateX(-100%);
}

.container.active .curtain .panel-right {
  transform: curtain2-open translateX(100%);
}

.fadingOut .container.active .curtain .panel-left {
  transform: curtain1-close translateX(-100%);
}

.fadingOut .container.active .curtain .panel-right {
  transform: curtain2-close translateX(100%);
}

.container.active .curtain .panel-left {
  transform: curtain1-open translateX(-100%);
}

.container.active .curtain .panel-right {
  transform: curtain2-open translateX(100%);
}

.fadingOut .container.active .curtain .panel-left {
  transform: curtain1-close translateX(-100%);
}

.fadingOut .container.active .curtain .panel-right {
  transform: curtain2-close translateX(100%);
}

Mã đó sai vì bạn vẫn có tên hoạt ảnh trong đó

.container.active .curtain .panel-left {
  transform: translateX(-100%);
}

.container.active .curtain .panel-right {
  transform: translateX(100%);
}

.fadingOut .container.active .curtain .panel-left {
  transform:  translateX(-100%);
}

.fadingOut .container.active .curtain .panel-right {
  transform:  translateX(100%);
}

Tuy nhiên, có vẻ như vấn đề nằm ở chỗ vùng chứa được hiển thị. không có gì để bắt đầu vì vậy không có gì cho quá trình chuyển đổi sang chuyển đổi từ. Khi bạn chỉ thêm lớp đang hoạt động thì vùng chứa sẽ hiển thị. chặn và khi bản dịch mới được thêm vào, phần tử chỉ bắt đầu trực tiếp tại vị trí mới

Phần tử không bao giờ có bản dịch bắt đầu từ 0 vì nó được hiển thị. không ai. Nó chỉ trở thành một phần tử khi nó được hiển thị. chặn và do đó không có sự chuyển đổi từ trạng thái trước đó

Bạn có thể xem bằng chứng trong codepen này nếu bạn bỏ ghi chú mã css ở dưới cùng và sau đó thử nhấp vào hộp

Để làm việc này, không cần sử dụng màn hình. không có gì để che giấu các thùng chứa rèm cửa. Điều này có vẻ là rất nhiều công việc trừ khi bạn thực sự muốn chức năng này

Ngoài ra, nếu bạn muốn hành vi nhấp mở và đóng trên rèm, bạn cần thay đổi cách thoát vì bạn có một lối thoát được hẹn giờ có thể bị gián đoạn nếu ai đó nhấp để mở lại rèm

Có rất nhiều logic cần được xác định trước khi mã hóa có thể diễn ra

Tôi thấy công việc ngược lại tại liên kết này tại đây. https. //jsfiddle. mạng/764fuvpj/3/

Điều này đã bị xóa không cần thiết bây giờ. Nó cũng không cần thiết trong mã của bạn

Điều này được thêm lại trong

.hide {
display:none;
}

Điều này không cần thiết sau đó?

.container.active .curtain .panel-left {
  animation: curtain1-open 8s forwards 520ms;
}

@keyframes curtain1-open {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}

Và làm điều này

.container.active .curtain .panel-left {
  animation: curtain1-open 8s forwards 520ms;
}

@keyframes curtain1-open {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}

thay vì điều này

.container.active .curtain .panel-left {
  animation: curtain1-open 8s forwards 520ms;
}

@keyframes curtain1-open {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}

Cái này sẽ không hoạt động trong mã sử dụng màn hình. không ai;

Có thể sử dụng thứ gì khác ở đó để thay thế tất cả những thứ đó không?

Giống như cách nó được thực hiện với những cái khác?

.container.active .curtain .panel-left {
  animation: curtain1-open 8s forwards 520ms;
}

@keyframes curtain1-open {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}

Điều này hoạt động trong mã nhưng sau đó các nút không theo thứ tự

nhìn thấy ở đây. https. //jsfiddle. mạng/764fuvpj/4/

.container.active .curtain .panel-left {
  animation: curtain1-open 8s forwards 520ms;
}

@keyframes curtain1-open {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}

Điều này đã bị xóa không cần thiết bây giờ. Nó cũng không cần thiết trong mã của bạn

đúng

Tất nhiên, nếu bạn nhấp vào rèm cửa, chúng sẽ đảo ngược hướng và bạn có thể tiếp tục nhấp và đảo ngược hướng cho đến khi chúng mở hoàn toàn. Rốt cuộc đó là nội dung của chủ đề này và bạn đã không kiểm tra?

Điều này được thêm lại trong

.hide {
display:none;
}

Điều này không cần thiết sau đó?

.container.active .curtain .panel-left {
  animation: curtain1-open 8s forwards 520ms;
}

@keyframes curtain1-open {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}

4

Tôi không chắc bạn đã thêm lớp ẩn một cách linh hoạt ở đâu và nếu nó được thêm vào phần cha của rèm cửa thì nó sẽ phá vỡ quá trình chuyển đổi. Nếu bạn chỉ thêm nó vào các nút phát thì nó sẽ không ảnh hưởng đến rèm nên bạn chỉ cần sử dụng màn hình. không có gì trên chúng

Điều này hoạt động trong mã nhưng sau đó các nút không theo thứ tự

nhìn thấy ở đây. https. //jsfiddle. mạng/764fuvpj/4/

.container.active .curtain .panel-left {
  animation: curtain1-open 8s forwards 520ms;
}

@keyframes curtain1-open {
  to {
    transform: translateX(calc(-100% - 1px));
  }
}

2

Không, bạn không thể sử dụng khả năng hiển thị vì nó không xóa các thành phần khỏi quy trình và sẽ ảnh hưởng đến bố cục

Bạn có vẻ không hiểu khái niệm này lắm. Khi bạn sử dụng màn hình. không có yếu tố nào biến mất hoàn toàn và không ảnh hưởng đến bất cứ điều gì và không thể chuyển đổi. Sử dụng phương pháp clip, bạn có thể làm cho phần tử dường như biến mất nhưng nó vẫn ở đó nhưng chỉ nhỏ đến mức bạn không thể nhìn thấy nó. Điều này cho phép tất cả các hiệu ứng chuyển tiếp hoạt động khi clip bị xóa. Nó cũng cho phép trình đọc màn hình nhìn thấy nó và hiểu cấu trúc

Nó được gọi là 'ẩn trực quan' vì về bản chất, bạn không muốn ẩn nội dung mà bạn chỉ muốn xem nội dung đó theo một thứ tự nhất định. Đó là lý do tại sao trên các menu thả xuống, tốt hơn là không sử dụng hiển thị. không có gì ngoài việc ẩn phần tử khỏi màn hình hoặc bằng một phương pháp như clip

Phương pháp clip là ngữ nghĩa nhất vì cả hai đều hiển thị. không có và khả năng hiển thị. ẩn có thể có nghĩa là các phần tử không thực sự truy cập được

Làm cách nào để đảo ngược hoạt ảnh trong JavaScript?

Thuộc tính hướng hoạt ảnh trong CSS là gì?

Làm cách nào để ngăn hoạt ảnh CSS quay trở lại vị trí ban đầu?