Переход на элемент CSS

Question

Я пробовал эту конструкцию в нескольких браузерах, и она не работает. Пожалуйста, помогите найти мою ошибку.

<style> 
.result{    
    width: 200px; 
    height: 300px; 
    background: #ff0000; 
}   
.result #add{ 
    display:none; 
} 
.result:hover #add{ 
    -webkit-transition: top 1s ease-out 1.5s; 
    -moz-transition: top 1s ease-out 1.5s; 
    transition: top 1s ease-out 1.5s; 
    display:block; 
} 
</style> 

<div class="result"> 
    <div id="add">111</div> 
</div> 

Answer 1

Несколько вещей, чтобы очистить первые

1. Вы не можете переходить от display: none к display: block. Просто не может случиться. Я бы рекомендовал переход opacity: 0 в opacity: 1 вместо для плавного перехода в действие
2. Ваш transition: top 1s ease-out 1.5s вызов только анимировать верхний атрибут. Вот что означает в этой строке top. Вы можете добавить несколько целей через список с разделителями-запятыми, например. top 1s ease-out, opacity 1s ease-out и т. Д. Иными словами, вы можете просто написать правило как transition: 1s ease-out, и оно будет анимировать все изменения (но это может иметь некоторые незначительные хиты производительности, а не выбор атрибутов для анимации).
3. При использовании CSS переходов вы должны иметь начальный и назначения состояние или анимация не будет работать. Пример кода будет:

---

.result{    
    width: 200px; 
    height: 300px; 
    top: 0; 
    background: #ff0000; 
}   
.result #add{ 
    opacity: 0; 
    position: relative; 
} 
.result:hover #add{ 
    -webkit-transition: 1s ease-out 1.5s; 
    -moz-transition: 1s ease-out 1.5s; 
    transition: 1s ease-out 1.5s; 
    opacity: 1; 
    top: 40px; 
} 

И что, как написано, должно работать для вас.

Answer 2

3 вопрос:

• вы пропускание top свойства в ваш переход top 1s ease-out 1.5s; но нет top для обозначения.
• Также вы не устанавливая position свойство для #add элемента
• display:block; вызовет быстрый перерисовывать, который позволит предотвратить вычисления правого CSS это необходимо, чтобы применить верхний переход - попробуйте с opacity вместо

Вот все применяемые к примеру:

.result{    
 
    width: 200px; 
 
    height: 300px; 
 
    background: #ff0000; 
 
}   
 
.result #add{ 
 
    opacity: 0; 
 
    position:relative; 
 
    top:0; 
 
} 
 
.result:hover #add{ 
 
    opacity: 1; 
 
    -webkit-transition: top 1s ease-out 1.5s; 
 
     -moz-transition: top 1s ease-out 1.5s; 
 
      transition: top 1s ease-out 1.5s; 
 
    top:150px; 
 
}

<div class="result"> 
 
    <div id="add">111</div> 
 
</div>