Запуск CSS-перехода при установке top на auto - PullRequest
Новая
       62

Запуск CSS-перехода при установке top на auto

0 голосов
/ 26 октября 2019

Я создаю сайт личного портфолио для демонстрации некоторых проектов и пытаюсь реализовать следующее:

  • Скриншот сайта показан с названием сайта на карточке внизуизображения
    • Когда пользователь наводит курсор мыши на изображение, изображение исчезает и карта в нижней части изображения плавно выскакивает, чтобы отобразить описание сайта

Все настроено, но я не могу заставить карту плавно переходить из нижней части изображения, она в настоящее время переходит из своей начальной позиции в конечную позицию.

Кодовая ручка находится здесь: https://codepen.io/umbauk/full/vYYZEjW

Соответствующая часть моего кода находится здесь: 

.project-text {
  background-color: rgb(58, 58, 58);
  padding: 1%;
  z-index: 5;
  position: absolute;
  width: 100%;
  top: calc(100% - 3rem);
  left: 0;
  transition: all 0.5s ease;
}

.project-box:hover .project-text {
  top: auto;
  bottom: 0;
  transition: all 0.5s ease;
}

project-text поле имеет переменный размер, поэтому я изначально установил его, чтобы показать верхние 3rem текстового поля, так что толькозаголовок отображается. При наведении курсора я установил bottom: 0, чтобы отображался весь текст (и установил top: auto, чтобы настройка bottom могла переопределять верх.

Однако transition: all 0.5s ease; не запускается. Он срабатывает, если я установилtop к чему-то, кроме auto, например, top: 50%.

Как мне получить, чтобы текстовое поле моего проекта плавно переходило и выходило, при этом просто выскакивая достаточно, чтобы показать весь текст? Спасибо заранее!

1 Ответ

1 голос
/ 26 октября 2019

Обычно вы не можете переводить что-либо на auto. Переходы и т. Д. Полагаются на числа , и auto не является числом.

Вместо того, чтобы использовать top значений и т. Д. Я бы посоветовал вам взглянуть на transform. 

html {
  font-size: 18px;
  height: 100%;
}

body {
  color: rgb(177, 177, 177);
  height: 100%;
  background-color: #121212;
}

h3 {
  font-size: 2rem;
  color: #ffffff;
  text-decoration: none;
  opacity: 0.87;
  margin: 0;
}

.projects {
  height: 100%;
  background-color: #121212;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 300px 300px;
  grid-template-areas: 'project1 project2' 'project3 project4';
  padding-left: 15%;
  padding-right: 15%;
  padding-top: 5%;
  grid-gap: 5%;
}

.project-text {
  background-color: rgb(58, 58, 58);
  padding: 1%;
  z-index: 5;
  position: absolute;
  width: 100%;
  top: 100%;
  left: 0;
  transform: translateY(-3rem);
  transition: all 0.5s ease;
}

.project-box:hover .project-text {
  transform: translateY(-100%);
  transition: all 0.5s ease;
}

.project-box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex: 1 1 auto;
  justify-content: center;
  align-items: flex-end;
  background-position: center;
  background-size: cover;
  position: relative;
  background: #121212;
  overflow: hidden;
}

.project-box:before {
  content: ' ';
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: cover;
}

.project-box:hover::before {
  opacity: 0.6;
}

.project1 {
  grid-area: project1;
}

.project1:before {
  background-image: url('https://darrengreenfield.com/cafeandkids.png');
}
<body>
  <div class="projects" id="projects">
    <div class="project1 project-box">
      <div class="project-text">
        <a href="https://cafeandkids.com" target="_blank" rel="noopener noreferrer">
          <h3>cafeandkids.com</h3>
        </a>
        <p>
          An app to help parents find great playgrounds near great coffee shops. A single page, front-end only app using HTMl, CSS, JavaScript and React. Uses Google Maps API and the OpenWeather API.
        </p>
      </div>
    </div>
  </div>
</body>
...