Trung tâm cá nhân
cuốn sách gpt4 ai đã làm

javascript - CSS 滑动过渡

In lại Tác giả: Walker 123 更新时间：2023-11-28 07:52:56 25 4
mua khóa gpt4 Nike

我正在尝试使用 CSS 过渡和一些 Javascript 实现滑动效果。问题是第二个框立即消失而不是滑动。有没有一种方法可以实现平滑效果，使辅助框不会消失，而是也会滑动。

如果可能的话，我还想禁用 PageLoad 上的动画。

var page1 = document.getElementById('page1');
var page2 = document.getElementById('page2');
var nxtbtn = document.querySelector('button[name="nxtbtn"]');
var prvbtn = document.querySelector('button[name="prvbtn"]');


function buttonDisabler() {
  if (page1.style.display == 'none') {

    nxtbtn.style.display = 'none';
    prvbtn.style.display = 'block';
  }
  if (page2.style.display == 'none') {

    prvbtn.style.display = 'none';
    nxtbtn.style.display = 'block';
  }
}
page2.style.display = 'none'
buttonDisabler();
nxtbtn.addEventListener('click', function() {
  page1.style.display = (page1.style.display == 'none') ? 'block' : 'none';
  page2.style.display = (page2.style.display == 'block') ? 'none' : 'block';
  buttonDisabler();
}, SAI);

prvbtn.addEventListener('click', function() {
  page1.style.display = (page1.style.display == 'block') ? 'none' : 'block';
  page2.style.display = (page2.style.display == 'none') ? 'block' : 'none';
  buttonDisabler();
}, SAI);
.nội dung {
  rõ ràng: cả hai;
  tràn: ẩn;
  chiều cao: 250px;
  chiều rộng: 250px;
}
.navigation {
  vị trí: tuyệt đối
}
.slideLeft {
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
}
@keyframes slideLeft {
  0% {
    transform: translateX(150%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(150%);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}
/*
==============================================
slideRight
==============================================
*/

.slideRight {
  animation-name: slideRight;
  -webkit-animation-name: slideRight;
  animation-duration: 500ms;
  -webkit-animation-duration: 500ms;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
}
@keyframes slideRight {
  0% {
    transform: translateX(-150%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes slideRight {
  0% {
    -webkit-transform: translateX(-100%);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}
/*

câu trả lời hay nhất

这是因为您正在使用 hiển thị: không có; 来隐藏隐藏的幻灯片。您需要在包装容器上使用 tràn: ẩn;，然后让幻灯片滑入和滑出 View 。

关于javascript - CSS 滑动过渡，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30282730/

25 4 0
Đề xuất bài viết: php - 多个段落
Đề xuất bài viết: jquery - css - 导航错误
Đề xuất bài viết: swift - 使用 Swift 在 Scenekit 中移动相机
Đề xuất bài viết: javascript - 如何让结果打印 "computer wins"或 "user wins"
Walker 123
Hồ sơ

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá taxi Didi miễn phí
Phiếu giảm giá taxi Didi
Các bài viết phổ biến trên toàn bộ trang web
Chứng chỉ ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com
Xem sitemap của VNExpress