目标CSS转换在伪元素＆＃34;箭头＆＃34;？

Question

我有一个带有＆＃34;箭头的DIV＆＃34;在底部，与漫画书中出现的漫画气泡不同，后者出现在悬停状态：

使用// Prism ViewModel base class, adjust for your framework or whatever you use as base public class MyWizardViewModel : BindableBase { public ObservableCollection<WizardPageViewModel> Pages { get; set; } public MyWizardViewModel() { Pages = new ObservableCollection<WizardPageViewModel>() { new WizardPage1ViewModel(), // public class WizardPage1ViewModel : WizardPageViewModel new WizardPage2ViewModel() // public class WizardPage2ViewModel : WizardPageViewModel } } } 和<Window x:Class="WPFToolkitWizard.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:common="clr-namespace:WPFToolkitWizard" xmlns:sys="clr-namespace:System;assembly=mscorlib" Title="MainWindow" Height="350" Width="525"> <Window.DataContext> <common:WizardPageViewModel/> </Window.DataContext> <Grid> <common:MyWizardControl ItemsSource="{Binding Pages}" /> </Grid> 伪元素创建箭头。

我有悬停的边框颜色和框阴影的过渡。

我的问题是＆＃34;箭头＆＃34;只是＆＃34;出现＆＃34;。没有像其他项目那样褪色，但我无法弄清楚如何定位箭头＆＃34;。 ＆＃34;所有＆＃34;看起来也不正确。

理想情况下，我喜欢延迟箭头和简单的淡化或擦拭。

这里是CSS：

:after

Answer 1

你只在悬停元素上有假元素，所以没有任何东西可以从/到过渡。您需要在非悬停状态元素上添加伪元素。

转换可见性的示例：

.item-selector-button:before {
    .arrow-inside(...);
    transition:all 5s ease;
    transition-delay: 0.3s;    
    visibility:hidden;
}

.item-selector-button:after {
    .arrow-outside(...);
    transition:all 5s ease;
    transition-delay: 0.3s;    
    visibility:hidden;
}

.item-selector-button:hover:before {
    visibility:visible;
}

.item-selector-button:hover:after {
    visibility:visible;
}